BootStrapTable的动态表格详细教程【附代码】

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

<button>    <i></i> SQL语句执行</button>

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: 见下文            error: 见下文    })})

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

  //针对返回的json数据，遍历json数据的key集合   for (var i = 0; i<p>这段代码我们可以结合浏览器F12，查看Object.keys(json[0])中的具体内容：模拟一个请求/test。 </p><p style="text-align: center;"><img src="https://img.php.cn/upload/image/981/949/901/1566282275331320.png" title="1566282275331320.png" alt="bootstrap31.png"></p><p>　2.2.3 构造表格，构造表格前要进行table销毁，否则会保留上次加载的内容</p><pre class="brush:js;toolbar:false">  $('#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   }); },

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

/** *  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<p><span style="font-size: 18px;"><strong>3.测试动态表格生成结果</strong></span></p><p><strong>3.1 测试分两部分，首先获取请求所得到的json数据，模拟请求获取100条数据</strong></p><pre class="brush:js;toolbar:false">@RequestMapping(value = "/test")    @ResponseBody    public Object test(){        return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]" +                "      ,[S_INFO_WINDCODE]" +                "      ,[S_CON_WINDCODE]" +                "      ,[S_CON_INDATE]" +                "      ,[S_CON_OUTDATE]" +                "      ,[CUR_SIGN]" +                "      ,[OPDATE]" +                "      ,[OPMODE]" +                "  FROM [WIND].[db_datareader].[AINDEXMEMBERS]");    }