Main
Main
文章目录
  1. 下载地址和源码
  2. 相关Js和Css
  3. 使用
    1. 在标签内写入如下html代码
    2. JS代码
    3. Action方法
    4. bootstrap-table其他事件、方法

Bootstrap-table简易教程

下载地址和源码

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
});
支持一下
  • 微信扫一扫
  • 支付宝扫一扫