近期刚刚结束一个项目,总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件,下面是我做的一个案例(展示主要代码部分):

  1. //请求服务数据时所传参数
  2. function queryParams(params){
  3. return{
  4. //每页多少条数据
  5. pageSize: params.limit,
  6. //请求第几页
  7. pageIndex: params.pageNumber,
  8. }
  9. }
  10. //创建表格
  11. $('#table').bootstrapTable({
  12. method: 'get',
  13. url: "../controller/main_pic_list.php",//后台接口地址
  14. dataType: "json",
  15. pagination: true, //分页
  16. search: true, //显示搜索框,是否显示表格搜索,此搜索是客户端搜索,不会进服务端
  17. strictSearch: true,//Enable the strict search
  18. striped: true, //是否显示行间隔色
  19. pageNumber: 1, //初始化加载第一页,默认第一页
  20. pageSize: 5,//每页的记录行数
  21. pageList:[5,10,15,20,25,30],//分页步进值
  22. showRefresh:true,//刷新按钮
  23. showColumns:true,//是否显示所有的列
  24.  
  25. //sortable: true,//是否启用排序
  26. //sortOrder: "asc",//排序方式
  27. //uniqueId: "ID",//每一行的唯一标识,一般为主键列
  28. showToggle:true,//是否显示详细视图和列表视图的切换按钮
  29. //cardView: false,//是否显示详细视图
  30. //detailView: false,//是否显示父子表
  31. //toolbar: '#toolbar',//指定工具栏
  32. //clickToSelect: true,//是否启用点击选中行
  33. //toolbarAlign:'right',//工具栏对齐方式
  34. //buttonsAlign:'right',//按钮对齐方式
  35.  
  36. queryParamsType:'limit',//查询参数组织方式
  37. queryParams:queryParams,//请求服务器时所传的参数
  38.  
  39. cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  40. locale:'zh-CN',//中文支持
  41. sidePagination: "server", //服务端处理分页
  42. responseHandler:function(res){
  43. //在ajax获取到数据,渲染表格之前,修改数据源
  44. $.each(res.rows,function (i,v) {
  45. v.updatetime = getLocalTime(v.updatetime);
  46. });
  47. return res;
  48. },
  49. columns: [
  50. {
  51. title:'全选',
  52. field:'select',
  53. //复选框
  54. checkbox:true,
  55. width:25,
  56. align:'center',
  57. valign:'middle'
  58. },
  59. {
  60. title: 'id',
  61. field: 'id',
  62. align: 'center'
  63. },
  64. {
  65. title: '标题',
  66. field: 'title',
  67. align: 'center',
  68. valign: 'middle'
  69. },
  70. {
  71. title: '说明信息',
  72. field: 'altinfo',
  73. align: 'center',
  74. },
  75. {
  76. title: '所属模块',
  77. field: 'modname',
  78. align: 'center'
  79. },
  80. {
  81. title: '图片URL',
  82. field: 'pictureurl',
  83. align: 'center',
                //更改此项显示的内容,无此参数会显示默认值
  84. formatter:function(value,row,index){
  85. return '<a href="'+ value +'" target=_blank>'+value+'</a> ';
  86. }
  87. },
  88. {
  89. title: '状态',
  90. field: 'status',
  91. align: 'center'
  92. },
  93. {
  94. title: '权重',
  95. field: 'weight',
  96. align: 'center'
  97. },
  98. {
  99. title: '最近更新时间',
  100. field: 'updatetime',
  101. align: 'center'
  102. },
  103. {
  104. title: '创建者',
  105. field: 'createuser',
  106. align: 'center'
  107. },
  108. {
  109. title: '最新修改者',
  110. field: 'lastuser',
  111. align: 'center'
  112. },
  113. {
  114. title: '最近修改者ip',
  115. field: 'lastip',
  116. align: 'center'
  117. },
  118. {
  119. title: '操作',
  120. field: 'operation',
  121. align: 'center',
                //更改此项显示的内容,无此参数会显示默认值
  122. formatter:function(value,row,index){
  123. var e = '<a href="main_pic_edit.html?id='+ row.id +'">编辑</a> ';
  124. var d = '<a href="../controller/main_pic_delete.php?id='+ row.id +'"style="color:red" href="#">删除</a> ';
  125. if(value === 'e') {
  126. return e;
  127. }
  128. if(value === 'ed') {
  129. return e+d;
  130. }
  131. }
  132. }
  133. ]
  134. });

  注意:1. bootstrap-table表格插件自带分页功能,传递的参数要和后台协商定义好;2. 其他参数配置参考代码中的注释。

bootstrap-table表格插件的使用案例的更多相关文章

  1. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  2. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  3. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  4. bootstrap 分页表格插件

    找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...

  5. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  6. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  7. 基于Bootstrap的表格插件bootstrap-table

    写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...

  8. Bootstrap Table 表格参数详解

    表格参数 名称   标签   类型   默认   描述   - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...

  9. bootstrap table表格前台分页,点击tab选项,重新刷新表格

    近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table: 在实际实现的时候,在默认状态下,表格翻到了第5页,此 ...

随机推荐

  1. 【正则表达式】匹配时间格式:hh:mm或h:m

    ^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$

  2. 每周.NET前沿技术文章摘要(2017-06-07)

    汇总国外.NET社区相关文章,覆盖.NET ,ASP.NET等内容: .NET .NET Core and .NET Framework Working Together, Or: The Magic ...

  3. vs code调试console程序报错--preLaunchTask“build”

    网上有其他大神给出的建议是注释掉launch.json中的 "preLaunchTask": "build", 但是这种方式也会造成一个问题,就是再使用F5调试 ...

  4. 2018第一发:记一次【Advanced Installer】打包之旅

    一.前言 2017年最后几天,你们都高高兴兴的跨年,博主还在加班制作.net安装包.因为年前要出来第一版的安装包,所以博主是加班加点啊.本来想用VS自带的制作工具,不过用过的人都知道,真是非常好(to ...

  5. bzoj 3670: [Noi2014]动物园

    Description 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学习 ...

  6. 1.QT开发第一个程序

    Ubuntu16.04安装QT5.8.0:http://www.cnblogs.com/dotnetcrazy/p/6725945.html QT5.8支持中文输入法(附带老版本的解决+不理想的情况解 ...

  7. Git详解之六:Git工具

    Git 工具 现在,你已经学习了管理或者维护 Git 仓库,实现代码控制所需的大多数日常命令和工作流程.你已经完成了跟踪和提交文件的基本任务,并且发挥了暂存区和轻量级的特性分支及合并的威力.(伯乐在线 ...

  8. 房上的猫:java基础知识部分知识点

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本  2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...

  9. leetcode — reorder-list

    /** * Source : https://oj.leetcode.com/problems/reorder-list/ * * Given a singly linked list L: L0→L ...

  10. A session had already been started – ignoring session_start() 怎么办?

    php警告提示A session had already been started – ignoring session_start() 解决方案 访问log日志发现有个这样的警告 主要是在TP框架中 ...