 悬赏园豆:20
                [已解决问题] 
            
                    解决于 2018-04-10 11:43
                悬赏园豆:20
                [已解决问题] 
            
                    解决于 2018-04-10 11:43 
                 
        以下是我使用bootstrap-table渲染表格,但是表格表头不固定,应该怎么修改,谢谢
$('#tb_modu').bootstrapTable({
            url: '/Module/get_modu',            //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar:"#tlb_modu",
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式 从小到大
            queryParams: function (params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                    limit: params.limit,   //页面大小
                    offset: params.offset,  //页码
                    search: '{"modu_code":"' + params.search + '","modu_name":"' + params.search + '","modu_state":"' + $('#conditions').val() + '"}'
                };
                return temp;
            },//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 100,                       //每页的记录行数(*)
            pageList: [100, 150, 250, 500],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: $('.modu').height(),
            uniqueId: 'modu_id',                //每一行的唯一标识,一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            searchOnEnterKey: true,
            showExport: true,                   //显示导出按钮  
            exportDataType: 'all',              //导出类型   
            treeShowField: 'modu_name',
            idField: 'modu_id',
            parentIdField: 'modu_modu_id',
            singleSelect: true,
            onLoadSuccess: function (data) {
                
            },
            columns: [{
                checkbox: true
            }, {
                field: 'modu_id',
                title: '模块id',
                visible: false,
                formatter: function (value, row, index) {
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + value + '</span>';
                    } else {
                        var a = '<span>' + value + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'modu_modu_id',
                title: '上级模块id',
                visible: false,
                formatter: function (value, row, index) {
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + value + '</span>';
                    } else {
                        var a = '<span>' + value + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'modu_code',
                title: '模块编码',
                formatter: function (value, row, index) {
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + value + '</span>';
                    } else {
                        var a = '<span>' + value + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'modu_name',
                title: '模块名称',
                formatter: function (value, row, index) {
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + value + '</span>';
                    } else {
                        var a = '<span>' + value + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'modu_url',
                title: '模块url',
                visible: false,
                formatter: function (value, row, index) {
                    var val = (value == null ? '-' : value);
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + val + '</span>';
                    } else {
                        var a = '<span>' + val + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'modu_type_name',
                title: '模块类型',
                visible: false
            }, {
                field: 'modu_app_name',
                title: '移动端模块',
                visible: false,
                formatter: function (value, row, index) {
                    if (row.modu_app_name == null) {
                        var a = '否';
                    } else {
                        var a = value;
                    }
                    return a;
                }
            }, {
                field: 'modu_ico',
                title: '模块图标',
                visible: false
            }, {
                field: 'modu_app_ico',
                title: '移动端图标',
                visible: false
            }, {
                field: 'modu_desc',
                title: '模块描述',
                formatter: function (value, row, index) {
                    var val = (value == null ? '-' : value);
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + val + '</span>';
                    } else {
                        var a = '<span>' + val + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'create_user_id',
                title: '创建人id',
                visible: false
            }, {
                field: 'creator',
                title: '创建人',
                formatter: function (value, row, index) {
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + value + '</span>';
                    } else {
                        var a = '<span>' + value + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'create_time',
                title: '创建时间',
                formatter: function (value, row, index) {
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + value + '</span>';
                    } else {
                        var a = '<span>' + value + '</span>';
                    }
                    return a;
                },
            }, {
                field: 'disable_time',
                title: '停用时间',
                visible: false,
                formatter: function (value, row, index) {
                    var val = (value == null ? '-' : value);
                    if (row.disable_time != null) {
                        var a = '<span style="color:red;">' + val + '</span>';
                    } else {
                        var a = '<span>' + val + '</span>';
                    }
                    return a;
                },
            }]
        });
bootstrap table支持js中配置和Html中对table配置两种方式,建议将通用配置放到js,每个表格不一样的在html中,如下
<thead>
 <tr>
 <th data-field="Code" data-width="105px">编号</th>
 <th data-field="Name" data-switchable="false">姓名</th>
 <th data-field="Sex" data-width="120px">性别</th>
 <th data-field="Age" data-width="120px">年龄</th>
 <th data-field="LoloOperate" data-width="30px">操作</th>
 </tr>
 </thead>
如果再想进一步“动态”,可以动态生成这部分th