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"
                     }
                     ]]
            })