Bootstrap Table Fixed Columns详解

本文介绍了如何使用 BootstrapTable 的 FixedColumns 功能来实现表格的固定列效果。通过设置 fixedColumns 和 fixedNumber 参数,可以指定哪些列保持固定不动。示例代码详细展示了配置方法及如何定义表格列。

最近在使用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" } ]] })
复制代码

 

$(table).bootstrapTable({ url: toBanCache(url), //请求后台的URL(*) method: "get", //请求方式(*) contentType: "application/json", //toolbar: toolbar, //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParamsType: "undefined",//设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder//设置为limit可以获取limit, offset, search, sort, order queryParams: paramsMethod, //传递参数(*),这里应该返回一个object,即形如{param1:val1,param2:val2} sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 15, //每页的记录行数(*) pageList: [15], //可供选择的每页的行数(*) search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: false, showColumns: false, //是否显示所有的列 showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: tableHeight, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: idField, //每一行的唯一标识,一般为主键列 idField: idField, //指定主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 singleSelect: true,//是否启用单选 columns: createCols(columns, columnWidths, columnAligns, titles, formatters, hasCheckbox) });
06-10
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值