下载地址和源码

1
https://github.com/wenzhixin/bootstrap-table

相关 Js 和 Css

1
2
3
~/jquery.js
~/bootstrap-table.js
~/bootstrap-table-zh-CN.min.js
1
2
~/bootstrap.min.css
~/bootstrap-table.min.css

使用

在标签内写入如下 html 代码
1
<table id="table"></table>
JS 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//页面加载时
$(function(){
    //初始化table
    var table = new TableInit();
    table.Init();
});

//TableInit();方法
var TableInit = function () {
    var tableInit = new Object();

    tableInit.Init = function () {
        $('#table').bootstrapTable({
            url: '@Url.Action("InitTable")',    //页面加载时,会发送查询条件到此Action
            method: 'get',    //方法 get/post
            cache: false,    //缓存
            pagination: true,    //分页
            queryParams: tableInit.QueryParams,    //查询条件
            sidePagination: 'server',   //服务器端分页
            pageSize: 10,    //每页10条
            pageList: [10, 15, 20],    //每页显示多少条
            showColumns: false,    //是否显示 内容列下拉框
            showToggle: false,    //是否显示 切换试图（table/card）按钮
            cardView: false,    //设置为 true将显示card视图，适用于移动设备。否则为table试图，适用于pc
            columns: [{     //列值，和后台返回的列对应
                field: 'checkbox',     //选择框
                checkbox: true,
                //rowspan: 2,
                align: 'center',
                valign: 'middle'
            }, {
                field: "Guid",     //value
                title: "主键",          //text
                visible: false,          //是否显示。false不显示
                valign :"middle" //  'top', 'middle', 'bottom'
                // other. 详见文档
             }, {
                field: "Name",     //value
                title: "姓名",          //text
                valign :"middle" //  'top', 'middle', 'bottom'
                // other. 详见文档
             } ]
        });
    };

    tableInit.QueryParams = function (params) {
        var temp = {
            limit: params.limit, //页码大小
            offset: params.offset, //页码
            //其他查询条件
            //TODO.
        };
        return temp;
    };

    return tableInit;
}
Action 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
public ActionResult InitTable(int limit, int offset /*其他查询条件*/)
{
    var list = _userService.GetAllList();

    //返回格式一定要包含 total和rows
    var obj = new
    {
        total = list.Count,
        rows = list.Skip(offset).Take(limit)
    };

    return Json(obj);
}

_userService 通过注入的方式，注册到当前 Controller 中。 Mvc下Autofac简单示例

bootstrap-table 其他事件、方法

api

1
http://bootstrap-table.wenzhixin.net.cn/documentation/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//获取checkbox选中的行
function GetIdSelections() {
  return $.map($("#table").bootstrapTable("getSelections"), function (row) {
    return row;
  });
}
//双击事件
$("#table").on("dbl-click-row.bs.table", function (row, $element, field) {
  //TODO
});
//单选 取消单选事件
$("#table").on("check.bs.table uncheck.bs.table", function (row) {
  //TODO
});
//全选 反选事件
$("#table").on("check-all.bs.table uncheck-all.bs.table", function (row) {
  //TODO
});