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

//请求服务数据时所传参数function queryParams(params){return{//每页多少条数据pageSize: params.limit,//请求第几页pageIndex: params.pageNumber,}}
//创建表格$('#table').bootstrapTable({method: 'get',url: "../controller/main_pic_list.php",//后台接口地址dataType: "json",pagination: true, //分页search: true, //显示搜索框,是否显示表格搜索,此搜索是客户端搜索,不会进服务端strictSearch: true,//Enable the strict searchstriped: true, //是否显示行间隔色pageNumber: 1, //初始化加载第一页,默认第一页pageSize: 5,//每页的记录行数pageList:[5,10,15,20,25,30],//分页步进值showRefresh:true,//刷新按钮showColumns:true,//是否显示所有的列//sortable: true,//是否启用排序//sortOrder: "asc",//排序方式//uniqueId: "ID",//每一行的唯一标识,一般为主键列showToggle:true,//是否显示详细视图和列表视图的切换按钮//cardView: false,//是否显示详细视图//detailView: false,//是否显示父子表//toolbar: '#toolbar',//指定工具栏//clickToSelect: true,//是否启用点击选中行//toolbarAlign:'right',//工具栏对齐方式//buttonsAlign:'right',//按钮对齐方式queryParamsType:'limit',//查询参数组织方式queryParams:queryParams,//请求服务器时所传的参数cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)locale:'zh-CN',//中文支持sidePagination: "server", //服务端处理分页responseHandler:function(res){//在ajax获取到数据,渲染表格之前,修改数据源$.each(res.rows,function (i,v) {v.updatetime = getLocalTime(v.updatetime);});return res;},columns: [{title:'全选',field:'select',//复选框checkbox:true,width:25,align:'center',valign:'middle'},{title: 'id',field: 'id',align: 'center'},{title: '标题',field: 'title',align: 'center',valign: 'middle'},{title: '说明信息',field: 'altinfo',align: 'center',},{title: '所属模块',field: 'modname',align: 'center'},{title: '图片URL',field: 'pictureurl',align: 'center',            //更改此项显示的内容,无此参数会显示默认值formatter:function(value,row,index){return '<a href="'+ value +'" target=_blank>'+value+'</a> ';}},{title: '状态',field: 'status',align: 'center'},{title: '权重',field: 'weight',align: 'center'},{title: '最近更新时间',field: 'updatetime',align: 'center'},{title: '创建者',field: 'createuser',align: 'center'},{title: '最新修改者',field: 'lastuser',align: 'center'},{title: '最近修改者ip',field: 'lastip',align: 'center'},{title: '操作',field: 'operation',align: 'center',            //更改此项显示的内容,无此参数会显示默认值formatter:function(value,row,index){var e = '<a href="main_pic_edit.html?id='+ row.id +'">编辑</a> ';var d = '<a href="../controller/main_pic_delete.php?id='+ row.id +'"style="color:red" href="#">删除</a> ';if(value === 'e') {return e;}if(value === 'ed') {return e+d;}}}]});

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

转载于:https://www.cnblogs.com/crf-Aaron/p/7838129.html

bootstrap-table表格插件的使用案例相关推荐

  1. bootstrap表格插件php,深入了解Bootstrap table表格插件(一)

    这篇文章主要为大家介绍了第一次学习Bootstrap table表格插件的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 第一次使用Bootstrap-table这个表格插件,记录一下使用过程 ...

  2. php bootstrap 分页 查询,深入了解Bootstrap table表格插件(二)前后端分页模糊查询...

    这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下 ...

  3. bootstrap表格插件php,bootstrap table表格插件使用详解

    bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCou ...

  4. Bootstrap Table表格插件的使用及数据导出

    文章目录 1.介绍 2.页面引用 3.简单示例 4.注意地方 5.演示图 1.介绍 Bootstrap Table介绍见官网:http://bootstrap-table.wenzhixin.net. ...

  5. bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...

  6. Bootstrap Table表格分页的使用及分页数据(Excel)导出

    ####相关文档 Bootstrap Table官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Bootstrap 中文网:http://www.b ...

  7. bootstrap table export插件导出pdf格式文件中文乱码问题解决办法

    bootstrap table export插件导出pdf格式文件中文乱码的问题折腾了我整整两天,网上到处都是改源码,自己设置字体的方案,我都没搞定.结果今天看到官方文档(地址:GitHub - hh ...

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

    原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...

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

    JS组件系列--Bootstrap Table 表格行拖拽 原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...

  10. bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...

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

最新文章

  1. Failed at the node-sass@4.14.0 postinstall script. npm ERR! This is probably not a problem with npm
  2. mysql 优化表 3000万_mysql优化:专题三、关于单表查询,可以这么优化
  3. java数组二分查找_java 13-1 数组高级二分查找
  4. 【简讯】微软拟发布开源VB6
  5. CF1370F2-The Hidden Pair(Hard Version)【交互题,二分】
  6. WCF开发入门的六个步骤
  7. LeetCode 353. 贪吃蛇(deque+set)
  8. linux的内置的账户_6 款面向 Linux 用户的开源绘图应用程序
  9. 函数别名c语言,C最佳实践 – 函数类型别名std :: function或T.
  10. 代码学习-Linux内核网卡收包过程(NAPI)
  11. JAVA实现二叉树带权路径长度和_哈夫曼树的构建与最小带权路径长度
  12. 面向对象技术(C++)学生成绩管理系统课程设计任务书及说明书
  13. AWS VPC(二)-----创建VPC Peering
  14. 关于TOPCODER的所有挑战、任务和GIG工作机会
  15. 愤怒的小鸟游戏开发教程(持续更新)
  16. Spring都没弄明白凭什么拿高薪,Android研发岗面试复盘总
  17. 冒泡算法的Java实现
  18. NXP i.MX 8M Mini开发板(4核 ARM Cortex-A53)硬件原理图规格说明书
  19. 【困扰了很久,实测已解决】MacBook上不了V2EX网站但Windows可以
  20. 各版本cuDNN驱动下载地址 无需注册

热门文章

  1. 解决 webpack-dev-server 不能使用 IP 访问
  2. 了解vue里的Runtime Only和Runtime+Compiler
  3. HTML实现包含公共部分:通过ECMA6的模块化,纯前端实现类似jsp:include的功能
  4. Vue+ElementUI实现文件的下载与上传
  5. Android 自定义WebView 实现可以加载缓存数据
  6. inputStream输入流转为String对象(将String对象转为inputStream输入流)
  7. 版本号控制-搭建gitserver
  8. 给程序媛妹子的4个贴心建议
  9. 遗传算法在JobShop中的应用研究(part1: 绪论)
  10. 浅谈用户体验的 4 个维度