bootstrap table表格插件使用详解


Posted in Javascript onMay 08, 2017

bootstrp-table学习,具体内容如下

$table.bootstrapTable({
  url: '../data/data1.json',
  striped: true,
  minimumCountColumns: 2,
  clickToSelect: true,
  detailView: true,
  detailFormatter: 'detailFormatter',
  pagination: true,
  paginationLoop: false,
  classes: 'table table-hover table-no-bordered',
  sidePagination: 'server',
  silentSort: false,
  queryParamsType:'',
  queryParams: queryParams : function(params) {
   var subcompany = $('#subcompany option:selected').val();
   var name = $('#name').val();  
     return {
   pageNumber: params.offset+1,
   pageSize: params.limit,
   companyId:subcompany,
   name:name
   };
  },
  smartDisplay: false,
  idField: 'id',
  sortable: false,
  escape: true,
  idField: 'systemId',
  maintainSelected: true,
  toolbar: '#toolbar',
  columns: [
   {field: 'state', checkbox: true},
   {field: 'id', title: '编号', sortable: true, halign: 'center'},
   {field: 'username', title: '账号', sortable: true, halign: 'center'},
   {field: 'password', title: '密码', sortable: true, halign: 'center'},
   {field: 'name', title: '姓名', sortable: true, halign: 'center'},
   {field: 'sex', title: '性别', sortable: true, halign: 'center'},
   {field: 'age', title: '年龄', sortable: true, halign: 'center'},
   {field: 'phone', title: '手机', sortable: true, halign: 'center'},
   {field: 'email', title: '邮箱', sortable: true, halign: 'center'},
   {field: 'address', title: '地址', sortable: true, halign: 'center'},
   {field: 'remark', title: '备注', sortable: true, halign: 'center'},
   {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
  ]
 }).on('all.bs.table', function (e, name, args) {
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="popover"]').popover(); 
 });

bootstrap-table是一种表格插件,可用作后管系统的数据处理和回显,当然,bootstrap-table的使用需要前后台协调进行。

在使用bootstrap-table过程中需要注意:

接口返回数据格式[json]包含的两个字段: total(数据总计)与rows(数据),即{"total":24,"rows":[...]}

分页包括服务器端和客户端两种情况,务器端分页的参数默认值为limit,offset,search,sort,order Else,通过queryParamsType参数可对其进行重写

columns字段中:file 表示返回字段的属性名;title表示th标题内容;formatter表示自定义列表显示内容,包含三个参数,value, row, index,对应 为file值,行数据,行数

function actionFormatter(value, row, index) {
 return [
 
  '<a class="like" href="detail.html" rel="external nofollow" data-toggle="tooltip" title="详情"><i class="glyphicon glyphicon-pencil"></i></a> ',
  '<a class="edit ml10" href="javascript:createAction()" rel="external nofollow" data-toggle="tooltip" title="修改密码"><i class="glyphicon glyphicon-edit"></i></a> ',
 ].join('');
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 #Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 #Javascript
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
H5上传本地图片并预览功能
May 08 #Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
vue2.0实现导航菜单切换效果
May 08 #Javascript
jquery replace方法去空格
May 08 #jQuery
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
vue实现简单表格组件实例详解
2017/04/16 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python中requests模块的使用方法
2015/04/08 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
如何完美的建立一个python项目
2020/10/09 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
办理信用卡工作证明
2014/01/11 职场文书
节约用水倡议书
2014/04/16 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
公司处罚决定书
2015/06/24 职场文书
小学生暑假生活总结
2015/07/13 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
详解Node.js如何处理ES6模块
2021/05/15 Javascript
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript