今天分享一下bootstraptable的相关技能点,由于第一次接触,所以刚开始碰了好多壁,于是趁现在过去不久,先总结总结。
Bootstraptable简单的来说就是一个表格控件,但是这个表格可不是一般的表格,分页、排序、查询都自带了,你就给他一个json数据就可以了。
接下来我们就看看怎么用:
- 先在页面中引入所需的js文件和css文件
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <script src="bootstrap-table-zh-CN.js"></script>
- 在我们所需要展示数据的表格上价格id,或者class都可以,在这里我以id为例。
<table id="table"></table>
- 接下来就是给表格里面加数据了,我们可以在加载当前页面时利用ajax去请求控制器,查询所需要的数据,然后放在一个集合中,转换成json格式就可以了。
下面是js中相关代码:
$(function () { caseTable(); });
//加载数据 function caseTable() { $('#table').bootstrapTable({ method: "get", //提交方法 striped: true, //是否显示行间隔色 cache:true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性 singleSelect: false, //设置True 将禁止多选 url: "/Home/GetAllAnJian",//查询的地址 dataType: "json", //服务器返回的数据类型 pagination: true, //是否分页 pageSize: 5, //页大小 pageNumber: 1, //当前页 search: false, //显示搜索框 contentType: "application/x-www-form-urlencoded", //发送到服务器的数据编码类型 queryParams:null, //参数 // function (parms) { // return { // aid: $("#aid").val(), // }; //}, columns: [ { title: "案件编号", //列标题 field: 'aid', //该列映射的data的参数名 align: 'center', //水平对齐方式 valign: 'middle', //垂直对齐方式 sortable: true //是否排序 }, { title: '案件名称', field: 'aname', align: 'center', valign: 'middle', sortable: true }, { title: '案件类型', field: 'atypename', align: 'center', valign: 'middle', sortable: true }, { field: '', title: '操作', halign: 'center', align: 'center', width: '50px', //宽度 sortable: true, //下面是单独加的按钮 formatter: function (value,row,index) { var e = '<button class="btn btn-primary" οnclick="tijiao(\'' + row.aid + '\')">提交</button>'; return e; }, }] }); }
- 后台查询数据的代码(以asp mvc为例):
控制器是:HomeController
请求数据的方法:
//查询所有的案件信息 public JsonResult GetAllAnJian(string aid) { List<AnJian> anAll = (from a in entity.AnJian where a.astatename.Equals("新建") select a).ToList(); //将日期类型转换成string类型 for (int i = 0; i < anAll.Count; i++) { anAll[i].adate_formate = anAll[i].adate.ToString(); } return Json(anAll, JsonRequestBehavior.AllowGet); }
下面是演示图(数据随便填的):
对了,另外结合layui使用更好用哦,时候不早了,明天在说结合layui使用的方法。