BootStrapTable의 동적 테이블에 대한 자세한 튜토리얼[코드 포함]

이 글에서는 부트스트랩 테이블 플러그인을 사용하여 동적 테이블을 구현하는 방법을 소개합니다.

추천 튜토리얼: Bootstrap 튜토리얼

BootStrapTable(이하 BsTable)을 빌드할 때 columns 매개변수는 테이블 열의 내용으로 저장됩니다. 반환된 데이터입니다. 그러면 동적 테이블이 생성됩니다.

columns 매개변수 형식: 다음과 유사

columns: {
    {
        field: 'Id',
        title: '编号',
    },{
        field: 'name',
        title: '名称',
    },{
        field: 'sex',
        title: '性别',
        //自定义方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

요구 사항: 버튼을 클릭하여 Ajax 요청을 보내고 요청에서 반환된 데이터를 기반으로 동적 테이블을 구축합니다.

버튼 구조: 클릭 이벤트 설정

<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
    <i class="fa fa-check"></i> SQL语句执行
</button>

클릭 이벤트 작성: dataQuery.js (참고: 하나씩 분석됩니다. 완전한 코드는 마지막에 붙여넣을 예정입니다.)

1. html 페이지 요소 값 가져오기

이 기능을 구현하려면 SQL 문(sql) + 연결 정보(connectInfo)라는 두 개의 매개 변수가 필요하므로 두 요소의 값을 페이지에서 가져와야 합니다. 첫째, 클래스 선택기는 해당 값을 얻기 위해 요소를 선택합니다.

var sql = $('#sql').val();
var connectInfo = $('#connectInfo').val();

2 페이지에서 테이블 요소를 선택하고, ajax 요청을 보내고, BSTable을 빌드하세요

페이지의 테이블 요소: beetl 태그를 사용하여 재사용된 HTML 코드를 코드 태그 줄로 바꿉니다. , 사용하기 편리하고 유지 관리가 쉽습니다.

<#table id="DataQueryTable"/>

　　2.1 Ajax 요청 매개변수 구성

parameter	meaning
type	요청 유형
url	링크 주소
contentType	을 서버에 요청
dataType의 형식	수신된 데이터의 형식
data	서버로 보낸 데이터
success	요청 성공 시 호출
error	요청 failed 호출 시

상세 코드:

$('#DataQueryTable').bootstrapTable({
    ajax: function (request) {
        $.ajax({
            type: "GET",
            url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            json: 'callback',
            success: 见下文
            error: 见下文
    })
})

　2.2 Ajax 요청 성공, 반환된 json 데이터를 기반으로 동적 헤더가 생성됨

　　2.2.1 사용자 정의 동적 헤더 배열 초기화

 //定义动态表头字段数组
    var dynamicHeader = [];
    //向数组中填入属性
    dynamicHeader.push({
        field: "state",
        check: true
    });

　2.2.2 동적 헤더 Generation

  //针对返回的json数据，遍历json数据的key集合
   for (var i = 0; i<(Object.keys(json[0])).length; i++) {
       //获取对应索引的value值，将获取的值设置到动态表头字段中。
       var property = (Object.keys(json[0]))[i];
       dynamicHeader.push({
           "title": property,
           "field": property,
           //显示是否显示隐藏
           switchable: true,
           //是否开启排序
           sortable: true
       });
   }

　This 이 코드를 브라우저 F12와 결합하여 Object.keys(json[0])의 특정 콘텐츠를 볼 수 있습니다. 요청/테스트를 시뮬레이션합니다.

　　2.2.3 테이블을 구성하기 전에 테이블을 삭제해야 합니다. 그렇지 않으면 마지막으로 로드된 내용이 유지됩니다.

  $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
       //得到的json数据，会根据columns参数进行对应赋值配置
       data: json,
       //Bstable工具导航条
       toolbar: '#toolbar',
       //浏览器缓存，默认为true，设置为false避免页面刷新调用浏览器缓存
       cache: false,
       //是否显示行间隔色
       striped: true,
       //分页方式：client客户端分页，server服务端分页
       sidePagination: "client",
       //排序方式
       sortOrder: "desc",
       //每页记录行数
       pageSize: 25,
       //初始化加载第一页
       pageNumber: 1,
       //可供选择的每页行数
       pageList: "[25, 50, 100, All]",
       //是否显示切换按钮
       showToggle: true,
       //是否显示所有的列
       showColumns: true,
       //是否显示导出按钮(下篇文章将会提到)
       showExport: true,
       //导出数据类型(下篇文章将会提到)
       exportDataType: "basic",
       //是否显示分页
       pagination: true,
       //是否启用全匹配搜索，否则为模糊搜索
       strictSearch: true,
       //开启搜索
       search: true,
       //自定义所生成的动态表头放入，结合上述json数据，实现表格数据内容的构建
       columns: dynamicHeader
   });
 },

　　2.3 ajax 요청이 실패하고 팝업 창에 오류 메시지가 표시됩니다. 페이지가 다시 로드됩니다

error: function () {
    alert("SQL查询错误，请输入正确的SQL语句！");
    location.reload();
}

js 코드 완성

/**
 *  BsTable动态表格生成
 */
DataQuery.sqlExecute = function (){

    var sql = $('#sql').val();
    var connectInfo = $('#connectInfo').val();

    $('#DataQueryTable').bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: 'callback',
                success: function (json) {

                    var dynamicHeader = [];
                    dynamicHeader.push({
                        field: "state",
                        check: true
                    });

                    for (var i = 0; i<(Object.keys(json[0])).length; i++) {
                        var property = (Object.keys(json[0]))[i];
                        //console.log(property);
                        dynamicHeader.push({
                            "title": property,
                            "field": property,
                            switchable: true,
                            sortable: true
                        });
                    }

                    //console.log(Object.keys(json[0]));

                    $(&#39;#DataQueryTable&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
                        data: json,
                        toolbar: &#39;#toolbar&#39;,
                        cache: false,
                        striped: true,
                        sidePagination: "client",
                        sortOrder: "desc",
                        pageSize: 25,
                        pageNumber: 1,
                        pageList: "[25, 50, 100, All]",
                        showToggle: true,
                        showColumns: true,
                        showExport: true,
                        exportDataType: "basic",
                        pagination: true,
                        strictSearch: true,
                        search: true,
                        columns: dynamicHeader
                    });
                },
                error: function () {
                    alert("SQL查询错误，请输入正确的SQL语句！");
                    location.reload();
                }
            });
        }
    });
};

3. 동적 테이블 생성 결과 테스트

　3.1 테스트는 두 부분으로 나누어집니다. 먼저 json 데이터를 가져옵니다. 3.2 요청에 의해 반환된 json 데이터 보기

　 3.3 동적 테이블 생성 테스트

위 요청은 다음을 수행할 수 있습니다. 정상적으로 데이터를 반환하는데, Ajax 요청을 통해 구축한 동적 BSTable은 어떻습니까? 　요청 내용은 SQL 문/링크 정보이며, ajax 요청은 위 요청과 일치하는 json 데이터를 반환합니다.

동적 테이블 생성 상태를 확인하세요:

Bingo, 이제 BootStrapTable 동적 테이블 기능이 구현되었습니다.

위 내용은 BootStrapTable의 동적 테이블에 대한 자세한 튜토리얼[코드 포함]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!