首页 > 代码库 > Bootstrap Table Fixed Columns
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 =http://www.mamicode.com/= null) {"-%"; } 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" } ]] })
Bootstrap Table Fixed Columns
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。