最近工作需要接触了bootstrap-table 所以研究了一下,并做了笔记,红色位置要特别注意

前端主要使用了 jquery bootstrap-table  bootstrap-edittable  bootstrap-table-edittable.js

1)首页我们需要先引用css及js文件

  1. <!---bootstrap使用的是3-->
  2. <link href="/Content/bootstrap.min.css" rel="stylesheet" />
  3. <link href="/Content/bootstrap-editable.css" rel="stylesheet" />
  4. <link href="/Content/bootstrap-table.min.css" rel="stylesheet" />
  5. <script src="/Scripts/jquery-1.10.2.js"></script>
  6. <script src="/Scripts/bootstrap.min.js"></script>
  7. <!---行内编辑使用的 1.1.5-->
  8. <script src="/Scripts/bootstrap-editable.js"></script>
  9. <!--bootstrap-table中文包及js-->
  10. <script src="/Scripts/bootstrap-table/bootstrap-table.min.js"></script>
  11. <script src="/Scripts/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  12. <!--封装了bootstrap-table对x-editable的使用-->
  13. <script src="/Scripts/bootstrap-table-editable.js"></script>
  14. <!---一些其他方法见 http://vitalets.github.io/x-editable/ --->

2)DOM书写,包括表格用到的div

  1. <div class="row">
  2. <div class="panel-body" style="padding-bottom:0px;">
  3. <div class="panel panel-default">
  4. <div class="panel-heading">查询条件</div>
  5. <div class="panel-body">
  6. <form id="formSearch" class="form-horizontal">
  7. <div class="form-group" style="margin-top:15px">
  8. <label class="control-label col-sm-1" for="txt_search_departmentname">条件1</label>
  9. <div class="col-sm-3">
  10. <input type="text" class="form-control" id="txt_search_departmentname">
  11. </div>
  12. <label class="control-label col-sm-1" for="txt_search_statu">条件2</label>
  13. <div class="col-sm-3">
  14. <input type="text" class="form-control" id="txt_search_statu">
  15. </div>
  16. <div class="col-sm-4" style="text-align:left;">
  17. <button type="button" style="margin-left:50px" id="btn_query" name="refresh" class="btn btn-primary">查询</button>
  18. </div>
  19. </div>
  20. </form>
  21. </div>
  22. </div>
  23. <div id="toolbar" class="btn-group">
  24. <button id="btn_add" type="button" class="btn btn-default">
  25. <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  26. </button>
  27. <button id="btn_edit" type="button" class="btn btn-default">
  28. <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
  29. </button>
  30. <button id="btn_delete" type="button" class="btn btn-default">
  31. <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
  32. </button>
  33. </div>
  34. <table id="tb_departments"></table>
  35.  
  36. </div>
  37. </div>

3)脚本的书写

  1. //(1)初始化
  2. $(function () {
  3. var oTable = new TableInit();
  4. oTable.Init();
  5. });
  6. var TableInit = function () {
  7. var oTableInit = new Object();
  8. oTableInit.Init = function () {
  9. $('#tb_departments').bootstrapTable({
  10. url: '/index/GetDepartment', //请求后台的URL(*)
  11. method: 'get', //请求方式(*)
  12. toolbar: '#toolbar', //工具按钮用哪个容器
  13. striped: true, //是否显示行间隔色
  14. cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  15. pagination: true, //是否显示分页(*)
  16. sortable: false, //是否启用排序
  17. sortOrder: "asc", //排序方式
  18. queryParams: oTableInit.queryParams,//传递参数(*)
  19. sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
  20. pageNumber: 1, //初始化加载第一页,默认第一页
  21. pageSize: 10, //每页的记录行数(*)
  22. pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
  23. search: false, //是否显示表格搜索,此搜索是客户端搜索,也可以是服务端检索
  24. strictSearch: true,
  25. showColumns: true, //是否显示所有的列
  26. showRefresh: true, //是否显示刷新按钮
  27. minimumCountColumns: 2, //最少允许的列数
  28. clickToSelect: true, //是否启用点击选中行
  29. height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
  30. uniqueId: "id", //每一行的唯一标识,一般为主键列
  31. showToggle: true, //是否显示详细视图和列表视图的切换按钮
  32. cardView: false, //是否显示详细视图
  33. detailView: false, //是否显示父子表
  34. columns: [{
  35. checkbox: true
  36. }, {
  37. field: 'one',
  38. title: '列1',
  39. editable: {
  40. type: 'text',
  41. title: '用户名',
  42. validate: function (v) {
  43. if (!v) return '用户名不能为空';
  44. }
  45. }
  46. //验证数字
  47. //editable: {
  48. // type: 'text',
  49. // title: '年龄',
  50. // validate: function (v) {
  51. // if (isNaN(v)) return '年龄必须是数字';
  52. // var age = parseInt(v);
  53. // if (age <= 0) return '年龄必须是正整数';
  54. // }
  55. //}
  56. //时间框
  57. //editable: {
  58. // type: 'datetime',
  59. // title: '时间'
  60. //}
  61. //选择框
  62. //editable: {
  63. // type: 'select',
  64. // title: '部门',
  65. // source: [{ value: "1", text: "研发部" }, { value: "2", text: "销售部" }, { value: "3", text: "行政部" }]
  66. //}
  67. //复选框
  68. //editable: {
  69. //type: "checklist",
  70. //separator:",",
  71. //source: [{ value: 'bsb', text: '篮球' },
  72. // { value: 'ftb', text: '足球' },
  73. // { value: 'wsm', text: '游泳' }],
  74. //}
  75. //select2
  76. //暂未使用到
  77.  
  78. //取后台数据
  79. //editable: {
  80. // type: 'select',
  81. // title: '部门',
  82. // source: function () {
  83. // var result = [];
  84. // $.ajax({
  85. // url: '/Editable/GetDepartments',
  86. // async: false,
  87. // type: "get",
  88. // data: {},
  89. // success: function (data, status) {
  90. // $.each(data, function (key, value) {
  91. // result.push({ value: value.ID, text: value.Name });
  92. // });
  93. // }
  94. // });
  95. // return result;
  96. // }
  97. //}
  98.  
  99. }, {
  100. field: 'two',
  101. title: '列2',
  102. }],
  103. //保存的使用
  104. onEditableSave: function (field, row, oldValue, $el) {
  105. //可进行异步操作
  106.  
  107. $.ajax({
  108. type: "post",
  109. url: "/index/Edit",
  110. data: row,
  111. dataType: 'JSON',
  112. success: function (data, status) {
  113. if (status == "success") {
  114. alert('提交数据成功');
  115. }
  116. },
  117. error: function () {
  118. alert('编辑失败');
  119. },
  120. complete: function () {
  121.  
  122. }
  123.  
  124. });
  125. }
  126.  
  127. });
  128. };
  129.  
  130. //得到查询的参数
  131. oTableInit.queryParams = function (params) {
  132. var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
  133. limit: params.limit, //页面大小
  134. offset: params.offset, //页码
  135. };
  136. return temp;
  137. };
  138. return oTableInit;
  139. };
  140.  
  141. //(2)关键字检索
  142. $("#btn_query").click(function () {
  143. //点击查询是 使用刷新 处理刷新参数
  144. var opt = {
  145. url: "/index/GetDepartment",
  146. silent: true,
  147. query: {
  148. text1: $("#txt_search_departmentname").val(), //条件1
  149. text2: $("#txt_search_statu").val() //条件2 ....
  150. }
  151. };
  152. $('#tb_departments').bootstrapTable('refresh', opt);
  153.  
  154. });
  155.  
  156. //(3)修改一、获取编号进入下一页
  157. $("#btn_edit").click(function () {
  158. var i = 0;
  159. var id;
  160. $("input[name='btSelectItem']:checked").each(function () {
  161. i++;
  162. id = $(this).parents("tr").attr("data-uniqueid");
  163. })
  164. if (i > 1) {
  165. alert("编辑只支持单一操作")
  166. } else {
  167. if (i != 0) {
  168. alert("获取选中的id为" + id);
  169. window.location.href = "/index/index";
  170. } else {
  171. alert("请选中要编辑的数据");
  172. }
  173.  
  174. }
  175.  
  176. })
  177.  
  178. //(4)删除及批量删除
  179.  
  180. $("#btn_delete").click(function () {
  181. if (confirm("确认要删除吗?")) {
  182. var idlist = "";
  183. $("input[name='btSelectItem']:checked").each(function () {
  184. idlist += $(this).parents("tr").attr("data-uniqueid") + ",";
  185. })
  186. alert("删除的列表为" + idlist);
  187.  
  188. }
  189. });
  190.  
  191. </script>

4)后台获取数据接口 index/GetDepartment

  1. public JsonResult GetDepartment(int limit, int offset,string text1 = "",string text2 = "")
  2. {
  3. List<demo> demolist = new List<demo>();
  4. for (var i = ; i < ; i++)
  5. {
  6. demo d = new demo();
  7. d.id = i;
  8. d.one = "one" + i;
  9. d.two = "two" + i;
  10. demolist.Add(d);
  11. }
  12.  
  13. if (text1 != "") {
  14. demolist = demolist.Where(a => a.one.Contains(text1)).ToList();
  15. }
  16. if (text2 != "") {
  17. demolist = demolist.Where(a => a.two.Contains(text2)).ToList();
  18. }
  19. return Json(new { total = , rows = demolist.Skip(offset).Take(limit).ToList()}, JsonRequestBehavior.AllowGet);
  20. }
  1. public class demo
  2. {
  3. public int id { get; set; }
  4.  
  5. public string one { get; set; }
  6. public string two { get; set; }
  7. }

5)行内编辑后台保存

  1. [HttpPost]
  2. //行内编辑使用
  3. public JsonResult Edit(demo user)
  4. {
  5. //逻辑
  6.  
  7. return Json(new { }, JsonRequestBehavior.AllowGet);
  8. }

6)结果图展示

7)js文件及css可下载源码,源码地址 https://github.com/MrsongJl/TableDemo/tree/master/TableDemo

8)使用自带检索修改初始化参数   search: true

后台接收search参数

9)如果你遇到表头与表不对齐的问题,请去掉

bootstrap-table的一些基本使用及表内编辑的实现的更多相关文章

  1. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  2. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  3. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  5. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  6. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

  7. Bootstrap Table使用分享

    版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...

  8. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  9. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

随机推荐

  1. CentOS 6 网络设置修改 指定IP地址 DNS 网关

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 路由器网关:192.168.1.1 步骤: 1.查看网络MAC地址 [ro ...

  2. bzoj4326

    二分+树剖+差分 之前的做法naive,莫名其妙的wa,明明uoj95分 看到最小最大上二分,树上路径问题直接剖,然后问题就转化成了一个判定问题,每次二分出最长路径长度,问能不能达到.那么我们就把所有 ...

  3. ChartCtrl源码剖析之——CChartAxis类

    CChartAxis类用来绘制波形控件的坐标轴,这个源码相对较复杂,当初阅读的时候耗费了不少精力来理解源码中的一些实现细节. CChartAxis类的头文件. #if !defined(AFX_CHA ...

  4. glyphicon 图标的使用

    基本用法<span class="glyphicon glyphicon-search"></span>可以将图标放于按钮于链接中,一个大按钮,按钮的内容是 ...

  5. ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)(一) 基本模型以及数据库的建立

    前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...

  6. centos配置nodejs和mysql

    我使用的是centos7.2 64位,弄了一大晚上试了各种方法,安装的nodejs就是启动不了服务器.全是IP能ping通,浏览器不能访问.端口都是打开了的.安全组也设置了,就是不行.最后阿里云客服电 ...

  7. 【数据结构】27、红黑树,节点插入,修复平衡操作总结(针对jdk8中hashmap冲突过多链表转红黑树)

    二叉树节点插入 0.如果只有一个节点,那么就直接作为根,涂黑,如果父为黑,或者祖父为空,那么不做操作 1.叔叔节点不为空且为红 那么就修改父,叔叔,祖父节点颜色,最后把当前节点设置为祖父节点,在进行平 ...

  8. docker数据存储

    docker数据存储 docker提供了三种类型的数据存储 第一种:将数据直接存储在容器中 第二种:将数据映射到外部的本机目录 第三种:将数据映射到专门的数据卷容器

  9. bnu oj 13288 Bi-shoe and Phi-shoe

    题目链接: http://www.bnuoj.com/contest/problem_show.php?pid=13288 题目大意: 给出一个n,然后给出n个幸运数([1,m]中不能被m整除的数的数 ...

  10. [ZPG TEST 118] 最大值【dp+离线】

    题4  最大值(findmax) [题目描述] 找到一个数组的最大值的一种方法是从数组开头从前到后对数组进行扫描,令max=a[0](数组下表从0..N-1),如果a[i]>max,就更新max ...