摘要：
//t、 zoukankan.com/Scripts/bootstrap editable.js“>；//vitalets.github.io/x-editable/--->；divclass=“panel-body”>；formclass=“form horizontal”>，divstyle=“margin-top；15像素“>；<；
最近工作需要接触了bootstrap-table 所以研究了一下，并做了笔记，红色位置要特别注意
前端主要使用了 jquery bootstrap-table bootstrap-edittable bootstrap-table-edittable.js
1）首页我们需要先引用css及js文件
<!---bootstrap使用的是3--> <link href="http://t.zoukankan.com/Content/bootstrap.min.css" rel="stylesheet" /> <link href="http://t.zoukankan.com/Content/bootstrap-editable.css" rel="stylesheet" /> <link href="http://t.zoukankan.com/Content/bootstrap-table.min.css" rel="stylesheet" /> <script src="http://t.zoukankan.com/Scripts/jquery-1.10.2.js"></script> <script src="http://t.zoukankan.com/Scripts/bootstrap.min.js"></script> <!---行内编辑使用的 1.1.5--> <script src="http://t.zoukankan.com/Scripts/bootstrap-editable.js"></script> <!--bootstrap-table中文包及js--> <script src="http://t.zoukankan.com/Scripts/bootstrap-table/bootstrap-table.min.js"></script> <script src="http://t.zoukankan.com/Scripts/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <!--封装了bootstrap-table对x-editable的使用--> <script src="http://t.zoukankan.com/Scripts/bootstrap-table-editable.js"></script> <!---一些其他方法见 http://vitalets.github.io/x-editable/ --->
2）DOM书写,包括表格用到的div
<div class="row">
<div style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form class="form-horizontal">
<div style="margin-top:15px">
<label for="txt_search_departmentname">条件1</label>
<div class="col-sm-3">
<input type="text" id="txt_search_departmentname">
</div>
<label for="txt_search_statu">条件2</label>
<div class="col-sm-3">
<input type="text" id="txt_search_statu">
</div>
<div style="text-align:left;">
<button type="button" name="refresh" class="btn btn-primary">查询</button>
</div>
</div>
</form>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
<span aria-hidden="true"></span>新增
</button>
<button type="button" class="btn btn-default">
<span aria-hidden="true"></span>修改
</button>
<button type="button" class="btn btn-default">
<span aria-hidden="true"></span>删除
</button>
</div>
<table id="tb_departments"></table>
</div>
</div>
3）脚本的书写
//(1)初始化 $(function () { var oTable = new TableInit(); oTable.Init(); }); var TableInit = function () { var oTableInit = new Object(); oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/index/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: false, //是否显示表格搜索，此搜索是客户端搜索,也可以是服务端检索 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: 'one', title: '列1', editable: { type: 'text', title: '用户名', validate: function (v) { if (!v) return '用户名不能为空'; } } //验证数字 //editable: { // type: 'text', // title: '年龄', // validate: function (v) { // if (isNaN(v)) return '年龄必须是数字'; // var age = parseInt(v); // if (age <= 0) return '年龄必须是正整数'; // } //} //时间框 //editable: { // type: 'datetime', // title: '时间' //} //选择框 //editable: { // type: 'select', // title: '部门', // source: [{ value: "1", text: "研发部" }, { value: "2", text: "销售部" }, { value: "3", text: "行政部" }] //} //复选框 //editable: { //type: "checklist", //separator:",", //source: [{ value: 'bsb', text: '篮球' }, // { value: 'ftb', text: '足球' }, // { value: 'wsm', text: '游泳' }], //} //select2 //暂未使用到 //取后台数据 //editable: { // type: 'select', // title: '部门', // source: function () { // var result = []; // $.ajax({ // url: '/Editable/GetDepartments', // async: false, // type: "get", // data: {}, // success: function (data, status) { // $.each(data, function (key, value) { // result.push({ value: value.ID, text: value.Name }); // }); // } // }); // return result; // } //} }, { field: 'two', title: '列2', }], //保存的使用 onEditableSave: function (field, row, oldValue, $el) { //可进行异步操作 $.ajax({ type: "post", url: "/index/Edit", data: row, dataType: 'JSON', success: function (data, status) { if (status == "success") { alert('提交数据成功'); } }, error: function () { alert('编辑失败'); }, complete: function () { } }); } }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 }; return temp; }; return oTableInit; }; //(2)关键字检索 $("#btn_query").click(function () { //点击查询是 使用刷新 处理刷新参数 var opt = { url: "/index/GetDepartment", silent: true, query: { text1: $("#txt_search_departmentname").val(), //条件1 text2: $("#txt_search_statu").val() //条件2 .... } }; $('#tb_departments').bootstrapTable('refresh', opt); }); //(3)修改一、获取编号进入下一页 $("#btn_edit").click(function () { var i = 0; var id; $("input[name='btSelectItem']:checked").each(function () { i++; id = $(this).parents("tr").attr("data-uniqueid"); }) if (i > 1) { alert("编辑只支持单一操作") } else { if (i != 0) { alert("获取选中的id为" + id); window.location.href = "/index/index"; } else { alert("请选中要编辑的数据"); } } }) //(4)删除及批量删除 $("#btn_delete").click(function () { if (confirm("确认要删除吗？")) { var idlist = ""; $("input[name='btSelectItem']:checked").each(function () { idlist += $(this).parents("tr").attr("data-uniqueid") + ","; }) alert("删除的列表为" + idlist); } }); </script>
4）后台获取数据接口 index/GetDepartment
public JsonResult GetDepartment(int limit, int offset,string text1 = "",string text2 = "") { List<demo> demolist = new List<demo>(); for (var i = 0; i < 100; i++) { demo d = new demo(); d.id = i; d.one = "one" + i; d.two = "two" + i; demolist.Add(d); } if (text1 != "") { demolist = demolist.Where(a => a.one.Contains(text1)).ToList(); } if (text2 != "") { demolist = demolist.Where(a => a.two.Contains(text2)).ToList(); } return Json(new { total = 100, rows = demolist.Skip(offset).Take(limit).ToList()}, JsonRequestBehavior.AllowGet); }
public class demo { public int id { get; set; } public string one { get; set; } public string two { get; set; } }
5）行内编辑后台保存
[HttpPost] //行内编辑使用 public JsonResult Edit(demo user) { //逻辑 return Json(new { }, JsonRequestBehavior.AllowGet); }
6）结果图展示
7）js文件及css可下载源码，源码地址 https://github.com/MrsongJl/TableDemo/tree/master/TableDemo
8）使用自带检索修改初始化参数 search: true
后台接收search参数
9)如果你遇到表头与表不对齐的问题，请去掉
