bootstrap-table的基本使用方法和属性

新酱
160
文章
42
评论
更多
 2019年5月26日12:28:25 评论 34,151 6686字阅读22分17秒

引入相应的js、css

先引入jQuery，jQuery必须在前面！

1
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

引入bootstrap的js和css

1
2
3
4
5
6
7
8
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

下载bootstrap-table的js和css并引用到项目中=>传送门

使用bootstrap-table

创建一个table标签，给这个标签取一个id(我取的id是exampleTableToolbar)，然后开始写javascript代码

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
<script>
    $(function () {
        $('#exampleTableToolbar').bootstrapTable({
            url: "/WGR/AddDeleteUser",
            search: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            toolbar: '#exampleToolbar',
            iconSize: 'outline',
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            },
            pagination: true,
            showColumns: true,
            showColumns: true,
            showRefresh: true,
            pageSize: 5,
            pageList: [5, 10, 15, 20],
            columns: [
                {
                    checkbox: true
                },
            {
                field: 'ID',
                title: 'ID'
            }, {
                field: 'RealName',
                title: '姓名'
            }, {
                field: 'title',
                title: '部门'
            }, {
                field: 'Email',
                title: 'Email'
            }, {
                field: 'Money',
                title: 'Money'
            }, {
                field: 'Address',
                title: '地址'
            }]
        });
</script>

url是后台返回的json，columns是后台查询的字段，field必须与后台处理的字段一样，我后台如下

1
2
3
4
5
6
public ActionResult AddDeleteUser()
        {
            UsersBll user = new UsersBll();
            ViewBag.user = user.GetList(u=>true).Select(u => new {u.Address,u.Email,u.Money,u.RealName,title=u.Dept.Title,u.ID });
            return Json(ViewBag.user, JsonRequestBehavior.AllowGet);
        }

单选或多选获取行id来删除数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        $('#delete').click(function () {
            var data = $('#exampleTableToolbar').bootstrapTable("getSelections");
            if (data.length > 0) {
                layer.confirm('你确定要删除选中的数据吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    for (var i = 0; i < data.length; i++) {
                        var userid = data[i].ID;
                            $.post('/WGR/DeleteUser', {userid:userid}, function (msg) {
                                if (msg == "no") {
                                    layer.msg('删除失败！', { icon: 2 });
                                }
                            });
                    }
                    layer.msg('删除成功！', { icon: 1,time:1000 });
                    window.location.reload();
                });
            }
        });

delete是我的删除按钮的id，通过getSelections方法获取选中行的数据(为数组)，若是没有选中getSelections获取的数组长度为0

bootstrap-table常用的属性和方法

属性

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
url: '/Interface/GetData',         //请求后台的URL（*）
method: 'get',                      //请求方式（*）
toolbar: '#toolbar',                //工具按钮用哪个容器
striped: true,                      //是否显示行间隔色
cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,                   //是否显示分页（*）
sortable: false,                     //是否启用排序
sortOrder: "asc",                   //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,                       //初始化加载第一页，默认第一页
pageSize: 10,                       //每页的记录行数（*）
pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
showColumns: true,                  //是否显示所有的列
showRefresh: true,                  //是否显示刷新按钮
minimumCountColumns: 2,             //最少允许的列数
clickToSelect: true,                //是否启用点击选中行
height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "no",                     //每一行的唯一标识，一般为主键列
showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
cardView: false,                    //是否显示详细视图
detailView: false,                   //是否显示父子表

方法

定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

方法名 参数 描述 举例
getOptions none 返回各项的object $table.bootstrapTable(‘getOptions’);
      - 请查看： getOptions
getSelections none 返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行） $table.bootstrapTable(‘getSelections’);
      - 请查看： getSelections
getAllSelections none 返回所有被选的行（原文中：contain search or filter，其实就是你选择的筛选之后的数据），当没有行被选择，则返回空数组 $table.bootstrapTable(‘getAllSelections’);
      - 请查看： getAllSelections
showAllColumns none 显示所有的列 $table.bootstrapTable(‘showAllColumns’);
      - 就是显示所有的列，并没什么可说的
hideAllColumns none 隐藏所有的列 $table.bootstrapTable(‘hideAllColumns’);
      - 就是隐藏所有的列
getData useCurrentPage 获取被加载的表的数据，如果你设置了使用当前页的数据（useCurrentPage），则返回当前页的数据 $table.bootstrapTable(‘getData’);
      - 请查看： getData
getRowByUniqueId id 获取你想要的某行的数据（设置某行的id） $table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID
      - 请查看： getRowByUniqueId
load data 向表中加载数据，原来的数据将被移除 $table.bootstrapTable(‘load’, data);
      - 请查看： load
append data 将数据追加在最后一行后 $table.bootstrapTable(‘append’, data);data可以是数组
      - 请查看： append
prepend data 也是追加，只是在第一行之前 $table.bootstrapTable(‘prepend’, data);data可以是数组
      - 请查看： prepend
remove params 移除一行或多行你所选的数据 $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); 
      - id：所需移除的那一行（rows，一或多行）的字段 
      - values：被移除的行的数组 
      - 请查看： remove
removeAll - 移除表中所有的数据 $table.bootstrapTable(‘removeAll’); 
      - 请查看： removeAll
removeByUniqueId - 移除某行数据（设置某行的id） $table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID 
      - 请查看： removeByUniqueId
insertRow params 新增一行，所需的参数如下： 
      - index：你想插入到哪（只要愿意，想插哪就插哪，想插谁就插谁） 
      - row：你想插入的数据		 $table.bootstrapTable(‘insertRow’, {index: 1, row: row}); 
      - 请查看： insertRow
updateRow params 更新行数据，所需的参数如下： 
      - index：所要更新的行的索引（index） 
      - row：你想换的新的数据		 $table.bootstrapTable(‘updateRow’, {index: 1, row: row}); 
      - 请查看： updateRow 
      - 请查看： Bootstrap Table实现定时刷新数据
updateByUniqueId params 更新某行数据，所需的参数如下： 
      - id：你想更新那行的id（唯一），（只要愿意，想换哪个换哪个） 
      - row：你想换的新的数据		 $table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); 
      - 请查看： updateByUniqueId
showRow params 显示特定行，所需的参数至少包括下面所列的一个： 
      - id：所要显示的行的索引（index） 
      - uniqueId：那一行的id		 $table.bootstrapTable(‘showRow’, {index:1}); 
      - 请查看： showRow/hideRow
hideRow params 隐藏特定行，所需的参数至少包括下面所列的一个： 
      - id：所要隐藏的行的索引（index） 
      - uniqueId：那一行的id		 $table.bootstrapTable(‘hideRow’, {index:1}); 
      - 请查看： showRow/hideRow
getRowsHidden boolean 获取隐藏的行（官方原话很多，其实总结起来就前面那一句） $table.bootstrapTable(‘getRowsHidden’);
方法名 参数 描述 举例
mergeCells options 融合~（把多格合并为一格），所需的参数如下： 
      - index：所要合并的格所在行的索引（index） 
      - field：所在列的字段名 
      - rowspan：合并的行总数目 
      - colspan：合并的列总数目		 $table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3});
      - 请查看： mergeCells
updateCell params 更新某格数据，所需的参数如下： 
      - index：所要合并的格所在行的索引（index） 
      - field：所在列的字段名 
      - value：要换的新的数据 
你也可以设置{reinit:false}来禁用表格的再次初始化		 $table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value});
refresh params 刷新服务端的数据： 
      - 可以设置{silent:true}来 偷偷地（<_<） 刷新 
      - 设置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改变请求的地址，页数，每页所显示的条数 
      - 可以设置{query:{foo:’bar’}}增加特定的参数		 $table.bootstrapTable(‘refresh’);
      - 请查看： refresh
refreshOptions options 看例子吧       - 请查看： refreshOptions
resetSearch text 重置搜索的文本（text）       - 请查看： resetSearch
showLoading none 显示正在加载……       - 请查看： showLoading/hideLoading
hideLoading none 隐藏正在加载……       - 请查看： showLoading/hideLoading
checkAll none 选择当前页的所有行 $table.bootstrapTable(‘checkAll’);
      - 请查看： checkAll/uncheckAll
uncheckAll none 取消选择当前页的所有行 $table.bootstrapTable(‘uncheckAll’);
      - 请查看： checkAll/uncheckAll
checkInvert none 反向选择，不难理解吧 $table.bootstrapTable(‘checkInvert’);
check index 选择某一行，索引（index）从0开始 $table.bootstrapTable(‘check’, 1);
      - 请查看： check/uncheck
uncheck index 取消选择某一行，索引（index）从0开始 $table.bootstrapTable(‘uncheck’, 1);
      - 请查看： check/uncheck
checkBy params 通过数组选择某一行，所需的参数如下： 
      - field：所要选的字段名 
      - values：所要选的那些值（数组）		 官方没，啊，有例纸：
- $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看： checkBy/uncheckBy
uncheckBy params 通过数组选择某一行，所需的参数如下： 
      - field：所要取消选择的字段名 
      - values：所要取消选择的那些值（数组）		 $(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看： checkBy/uncheckBy
resetView params 改变表格的样式，例如改变表格的高度（height） $table.bootstrapTable(‘resetView’);
      - 请查看： resetView
resetWidth none 自动改变表头和表脚（就译成脚，任性）的宽度来适应每列的宽度 $table.bootstrapTable(‘resetWidth’);
destroy none 销毁表格 A！T！T！A！C！K！ $table.bootstrapTable(‘destroy’);
      - 请查看： destroy
showColumn field 显示特定的列 $table.bootstrapTable(‘showColumn’, ‘name’);
      - 请查看： showColumn/hideCoulumn
hideColumn field 隐藏特定的列 $table.bootstrapTable(‘hideColumn’, ‘name’);
      - 请查看： showColumn/hideCoulumn
方法名 参数 描述 举例
getHiddenColumns - 获取所有隐藏的列 $table.bootstrapTable(‘getHiddenColumns’);
getVisibleColumns - 获取所有显示的列 $table.bootstrapTable(‘getVisibleColumns’);
scrollTo value 滚……到哪个位置，单位是’px’，如果设为’bottom’，嗖，恭喜你已到表尾 $table.bootstrapTable(‘scrollTo’, 0);
      - 请查看： scrollTo
getScrollPosition none 获取当前所滚到的位置，单位你懂得，就是’px’ $table.bootstrapTable(‘getScrollPosition’);
filterBy none 只能在客户端（client-side，相对server-side）这边用，过滤表中的数据 
例如： 
      - 可以设置{age:10}来只显示age为10的数据 
      - 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: [“blue”, “red”, “green”]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据		 $table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] });
      - 请查看： filterBy
selectPage page 跳转到特定的页面 $table.bootstrapTable(‘selectPage’, 1);
      - 请查看： selectPage/prevPage/nextPage
prevPage none 跳转到上一页 $table.bootstrapTable(‘prevPage’);
      - 请查看： selectPage/prevPage/nextPage
nextPage none 跳转到下一页 $table.bootstrapTable(‘nextPage’);
      - 请查看： selectPage/prevPage/nextPage
togglePagination none 词穷，请看例纸 $table.bootstrapTable(‘togglePagination’);
      - 请查看： togglePagination
toggleView none 改变视图 $table.bootstrapTable(‘toggleView’);
      - 请查看： toggleView
expandRow index 可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用 
      - 通过参数index来展开此列的详细视图		       - 请查看： expandRow-collapseRow
collapseRow index 可使用条件：detail view设为了true 
      - 通过参数index来关闭此列的详细视图		       - 请查看： expandRow-collapseRow
expandAllRow is subtable 可使用条件：detail view设为了true 
      - 展开所有列的详细视图		 $table.bootstrapTable(‘expandAllRow’); 
      - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的
collapseAllRow is subtable 可使用条件：detail view设为了true 
      - 关闭所有列的详细视图		 $table.bootstrapTable(‘collapseAllRow’); 
      - 参考上面

实例效果图

bootstrap-table的基本使用方法和属性
bootstrap-table的基本使用方法和属性

 

  • 版权声明： 发表于 2019年5月26日12:28:25
  • 转载注明：https://www.xiaorenjc.net/program/asp-net/104

您必须才能发表评论！