当前位置：首页 >前端技术 > 使用bootstrap table小记（表格组件）

使用bootstrap table小记（表格组件）

前端技术

前言

新的一年悄然到来，生活依旧。最近一周大热的赵雷风，一首《成都》,一首《理想》再次把民谣展示在国人面前。歌词着实写的不错。

理想，你今年几岁

你总是诱惑着年轻的朋友

你总是谢了又开给我惊喜

又让我沉入失望的生活里

。。。。

我已不是无悔的那个青年

青春被时光抛弃

已是当父亲的年纪

理想永远都年轻

你让我倔强的反抗着命运

你让我变得苍白

却依然天真的相信

花儿会再次的盛开

等等，这和我们今天的主题貌似没半毛钱关系。好了，再扯就扯远了，今天和大家分享的是 Bootstrap Table 点我查看效果

或者直接看简版效果如下（一个简单的后台管理，实现了增删查改）：

bottstrap相关

既然说是bootstrap table 那肯定是bootstrap实现的（这是句废话）。

关于bottstrap相关文档如下：

Bootstrap中文网：http://www.bootcss.com/

Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html

Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table

Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/

Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/

Bootstrap离线API

Bootstrap Table 离线API

bottstrap引入

关于引入有两种方式，一种是直接下载源码，然后放到项目中，bottstrap包可以到http://v3.bootcss.com/ 中找到。

第二种方法就是使用打开Nuget，搜索这两个包

而Bootstrap Table的版本竟然是0.4，这也太坑爹了。所以博主建议Bootstrap Table的包就直接在源码里面去下载吧。Bootstrap Table最新的版本好像是1.9.0。

代码解析

@{Layout = null;}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>BootStrap Table使用</title>@*1、Jquery组件引用*@<script src="~/Scripts/jquery-1.10.2.js"></script>@*2、bootstrap组件引用*@<script src="~/Content/bootstrap/bootstrap.js"></script><link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />@*3、bootstrap table组件以及中文包的引用*@<script src="~/Content/bootstrap-table/bootstrap-table.js"></script><link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" /><script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>@*4、页面Js文件的引用*@<script src="~/Scripts/Home/Index.js"></script></head><body><div class="panel-body" style="padding-bottom:0px;"><div class="panel panel-default"><div class="panel-heading">查询条件</div><div class="panel-body"><form id="formSearch" class="form-horizontal"><div class="form-group" style="margin-top:15px"><label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label><div class="col-sm-3"><input type="text" class="form-control" id="txt_search_departmentname"></div><label class="control-label col-sm-1" for="txt_search_statu">状态</label><div class="col-sm-3"><input type="text" class="form-control" id="txt_search_statu"></div><div class="col-sm-4" style="text-align:left;"><button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button></div></div></form></div></div><div id="toolbar" class="btn-group"><button id="btn_add" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button><button id="btn_edit" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button><button id="btn_delete" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button></div><table id="tb_departments"></table></div></body></html>

引入需要的文件之后，我们最重要的就是定义一个空的table，如上的 <table id="tb_departments"></table> 。当然Bootstrap table还提供了一种简介的用法，直接在table标签里面定义类似“data-...”等相关属性，就不用再js里面注册了，但博主觉得这种用法虽然简单，但不太灵活，遇到父子表等这些高级用法的时候就不太好处理了，所以咱们还是统一使用在js里面初始化的方式来使用table组件。

Js初始化

$(function () {//1.初始化Tablevar oTable = new TableInit();oTable.Init();//2.初始化Button的点击事件var oButtonInit = new ButtonInit();oButtonInit.Init();});var TableInit = function () {var oTableInit = new Object();//初始化TableoTableInit.Init = function () {$('#tb_departments').bootstrapTable({url: '/Home/GetDepartment', //请求后台的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,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大strictSearch: true,showColumns: true,  //是否显示所有的列showRefresh: true,  //是否显示刷新按钮minimumCountColumns: 2, //最少允许的列数clickToSelect: true,//是否启用点击选中行height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度uniqueId: "ID", //每一行的唯一标识，一般为主键列showToggle:true,//是否显示详细视图和列表视图的切换按钮cardView: false,//是否显示详细视图detailView: false,//是否显示父子表

columns: [{
checkbox: true
}
, {
field: 'MethodName',
title: '方法名'
}, {
field: 'OperType',
title: '日志类型'
}, {
field: 'LogFormat',
title: '内容格式'
}, {
field: 'ParamterValues',
title: '格式参数'
}, {
field: 'LogSql',
title: '数值'
}, {
field: 'SQLParamter',
title: '数值定义'
}, {
field: 'CreateDate',
title: '创建时间'
}
]

});};//得到查询的参数oTableInit.queryParams = function (params) {var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit,//页面大小offset: params.offset,  //页码departmentname: $("#txt_search_departmentname").val(),statu: $("#txt_search_statu").val()};retu temp;};retu oTableInit;};var ButtonInit = function () {var oInit = new Object();var postdata = {};oInit.Init = function () {//初始化页面上面的按钮事件};retu oInit;};

表格的初始化也很简单，定义相关的参数即可。上面一些博主觉得重要的参数都加了注释，并且初始化Table必须的几个参数博主也用（*）做了标记，如果你的表格也有太多的页面需求，直接用必须的参数就能解决。同样，在columns参数里面其实也有很多的参数需要设置，比如列的排序，对齐，宽度等等。这些博主觉得比较简单，不会涉及表格的功能，看看API就能搞定。

注：如果需要隐藏某列，只需要即可

$('#tb_departments').bootstrapTable('hideColumn', '列名');

显示某列

$('#tableOrderRealItems').bootstrapTable('showColumn', '列名');

在Controller里面对应的方法

public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu){var lstRes = new List<Department>();for (var i = 0; i < 50; i++){var oModel = new Department();oModel.ID = Guid.NewGuid().ToString();oModel.Name = "销售部" + i ;oModel.Level = i.ToString();oModel.Desc = "暂无描述信息";lstRes.Add(oModel);}var total = lstRes.Count;var rows = lstRes.Skip(offset).Take(limit).ToList();retu Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);}

这里有一点需要注意：如果是服务端分页，返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到前端。

效果及说明

小结

第一个问题上面说过，如果在js里面初始化的参数 sidePagination: "server" 设置为在服务端分页，那么我们的返回值必须告诉前端总记录的条数和当前页的记录数，然后前端才知道如何分页。并且最重要的一点，这两个参数的名字必须为total和rows。最开始博主也不知道这个，写成了total和row，结果是请求可以进到后台的GetDepartment方法，返回值total和row也都有值，可是前端就是显示如下：

找了好半天原因。原来是row写错了，应该写成rows。

第二个问题就是关于bootstrap页面样式的问题，我们使用过bootstrap的朋友应该知道，它里面所有的图标都是通过class = "glyphicon glyphicon-plus"这种方式去写的。博主按要求这样做了，可是新增、修改、删除前面的图标怎么都出不来。如下：

怎么回事呢？然后各种百度，最后发现原来是fonts文件夹的问题。我们在新建一个MVC项目的时候，会自动创建一个fonts文件夹，里面内容如下：

而我们的bootstrap.css是放在Content文件夹里面的，这样就导致找不到这些样式文件。最终通过谷歌浏览器查看控制台

原来它自动去Content里面找fonts文件夹了。这下就好办了，把我们的fonts文件夹拷贝到Content下不就行了吗。呵呵，原来真是这样，问题顺利解决

Content文件夹中存放文件如下所示：

第三点要说说表格自带的搜索功能，有上可知，在初始化表格的时候，通过设置search: true可以设置表格的搜索框出现并且可以进行模糊搜索。之前博主一直以为只有客户端分页才能使用这个搜索，多谢园友指出，其实服务端分页也可以使用这个搜索功能。只不过需要在对应的方法里加上search参数。比如

oTableInit.queryParams = function (params) {var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit,//页面大小offset: params.offset,  //页码departmentname: $("#txt_search_departmentname").val(),statu: $("#txt_search_statu").val(),search:params.search};retu temp;};

然后后端（后端可以根据这个参数值是否有值来判断做什么查询）

public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu, string search){var lstRes = new List<Department>();for (var i = 0; i < 50; i++){var oModel = new Department();oModel.ID = Guid.NewGuid().ToString();oModel.Name = "销售部" + i ;oModel.Level = i.ToString();oModel.Desc = "暂无描述信息";lstRes.Add(oModel);}var total = lstRes.Count;var rows = lstRes.Skip(offset).Take(limit).ToList();retu Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);}

这样，每次用户在搜索框里面输入都会进到后台的方法，并且将用户输入的值传到search参数。但是如果你需要对多个字段进行模糊匹配，那么就意味着你的后台需要去对多个数据字段进行like操作，这样查询效率肯定低下。所以，如果需要模糊匹配的字段很多，这个search在实际项目中是用不上的。综上，博主还是觉得只有在客户端分页的时候，这个搜索的作用比较明显。

第四点：关于Bootstrap Table的排序，由于一般这种BS系统肯定会采用服务端分页，我们如果仅仅在js里面设置sortable和sortOrder等属性信息，表格是不会有效排序的。原因很简单，服务端分页的方式，排序本页数据意义不大。所以，一般的排序需要将排序方式和排序字段发送到后台，在后台排序比较合适。比如我们这里可以再参数里面增加两个：

oTableInit.queryParams = function (params) {var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit,//页面大小offset: params.offset,  //页码order: params.order,ordeame: params.sort,departmentname: $("#txt_search_departmentname").val(),statu: $("#txt_search_statu").val()};retu temp;};