首页 新闻 会员 周边 捐助

bootstrap-table固定表头

0
悬赏园豆: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;
                },
            }]
        });

yjcd的主页 yjcd | 初学一级 | 园豆:61
提问于:2018-03-27 14:36
< >
分享
最佳答案
1

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

收获园豆:20
FlyLolo | 菜鸟二级 |园豆:434 | 2018-03-27 15:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册