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 相关文章推荐
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
JS触摸与手势事件详解
May 09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
Vue3中toRef与toRefs的区别
Mar 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
JS array 数组详解
2009/03/22 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python用input输入列表的实例代码
2020/02/07 Python
python自动生成sql语句的脚本
2021/02/24 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
灵泰克Java笔试题
2016/01/09 面试题
经贸日语专业个人求职信范文
2013/12/28 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
yy司仪主持词
2014/03/22 职场文书
作文评语集锦大全
2014/04/23 职场文书
个人违纪检讨书
2014/09/15 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript