Bootstrap Table Fixed Columns详解

最近在使用BootStrap 做项目前端，自然也用到了  Bootstrap Table。

推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/  网站看看，上面有很详细的介绍以及其他扩展功能

下面写下 Fixed Columns（固定列）的使用方法。附件下载地址：http://pan.baidu.com/s/1kUEQTPt

1.引用css文件，js文件（注意引用顺序）

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <link rel="stylesheet" href="css/bootstrap-table-fixed-columns.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-fixed-columns.js"></script>

2.添加  是否启用固定列： fixedColumns: true  固定列的个数：fixedNumber: 3

 $table.bootstrapTable({
                dataType: "json",
                method: 'get',
                contentType: "application/x-www-form-urlencoded",
                cache: false,
                url: '',
                pagination: true,
                fixedColumns: true,
                fixedNumber: 3,
                columns: []
            })        

3.这样就可以了，附上一个例子，需要的可以参考下。附件下载地址：http://pan.baidu.com/s/1kUEQTPt

4.下面是我在项目中的一个实例：

    $table = $('#table');
　　$table.bootstrapTable({
                //data: jsonData,
                dataType: "json",
                method: 'get',
                contentType: "application/x-www-form-urlencoded",
                cache: false,
                url: '@Url.Action("GetEnterpriseList/"+ ViewData["Id"] + "")',
                pagination: true,
                //pageSize: 10,                          
                //pageList: [10, 25, 50, 100],
                fixedColumns: true,
                fixedNumber: 3,
                columns: [
                     [{
                         title: '排名',
                         valign: "middle",
                         halign: "center",
                         align: "center",
                         colspan: 1,
                         rowspan: 2,
                         formatter: function (value, row, index) {
                             return index + 1;
                         }
                     },
                     {
                         field: 'nat_Org_Code',
                         title: '组织机构代码',
                         valign: "middle",
                         halign: "center",
                         align: "left",
                         colspan: 1,
                         rowspan: 2,
                         formatter: function (value, row, index) {
                             return '<a href="javascript:open(\'' + row.nat_Org_Code + '\',\'' + row.org_Name + '\')">' + value + '</a>';
                         }
                     },
                     {
                         field: 'org_Name',
                         title: '企业名称',
                         valign: "middle",
                         halign: "center",
                         align: "left",
                         colspan: 1,
                         rowspan: 2,
                         formatter: function (value, row, index) {
                             return '<a href="javascript:open(\'' + row.nat_Org_Code + '\',\'' + row.org_Name + '\')">' + value + '</a>';
                         }
                     },
                     {
                         title: "当期值",
                         valign: "middle",
                         halign: "center",
                         align: "center",
                         colspan: 4,
                         rowspan: 1
                     },
                     {
                         title: "同期值",
                         valign: "middle",
                         halign: "center",
                         align: "center",
                         colspan: 2,
                         rowspan: 1
                     },
                     {
                         field: 'reg_Capital',
                         title: "注册资金",
                         halign: "center",
                         valign: "middle",
                         align: "right",
                         rowspan: 2
                     },
                     {
                         field: 'est_Date',
                         title: "注册日期",
                         halign: "center",
                         valign: "middle",
                         align: "right",
                         rowspan: 2,
                         formatter: function (value, row, index) {
                             return value;
                         }
                     },
                     {
                         field: 'ent_mtype_name',
                         title: "企业类型",
                         halign: "center",
                         valign: "middle",
                         align: "left",
                         rowspan: 2
                     },
                    {
                        field: 'industry_mtype_name',
                        title: "行业类型",
                        halign: "center",
                        valign: "middle",
                        align: "left",
                        rowspan: 2
                    },
                     {
                         field: 'org_Addr',
                         title: "注册地址",
                         halign: "center",
                         valign: "middle",
                         align: "left",
                         rowspan: 2
                     }
                     ],
                     [{
                         field: 'tax',
                         title: "税收",
                         halign: "center",
                         valign: "middle",
                         align: "right"
                     },
                     {
                         field: 'taxzl',
                         title: "同比增量",
                         halign: "center",
                         valign: "middle",
                         align: "right"

                     },
                     {
                         field: 'taxtb',
                         title: "同比",
                         valign: "middle",
                         halign: "center",
                         align: "right",
                         formatter: function (value, row, index) {
                             if (value == null) {
                                 return "-%";
                             } else {
                                 return value + "%";
                             }
                         }
                     },
                     {
                         field: 'qjsr',
                         title: "区级收入",
                         halign: "center",
                         valign: "middle",
                         align: "right"
                     },
                     {
                         field: 'tax1',
                         title: "区级收入",
                         halign: "center",
                         valign: "middle",
                         align: "right"
                     },
                     {
                         field: 'qjsr1',
                         title: "税收",
                         halign: "center",
                         valign: "middle",
                         align: "right"
                     }
                     ]]
            })