码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap Table Fixed Columns

时间:2017-02-09 00:21:29      阅读:372      评论:0      收藏:0      [点我收藏+]

标签:pre   实例   ati   .com   收入   sheet   行业   sel   urlencode   

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

 

Bootstrap Table Fixed Columns

标签:pre   实例   ati   .com   收入   sheet   行业   sel   urlencode   

原文地址:http://www.cnblogs.com/worf/p/6380170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!