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各种复制代码收集
Sep 20 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
将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教程 插件机制在PHP中实现方案
2012/11/02 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP中cookie知识点学习
2018/05/06 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
js精度溢出解决方案
2012/12/02 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python队列Queue的详解
2019/05/10 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
小学母亲节活动方案
2014/03/14 职场文书
教师对学生的评语
2014/04/28 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
党员民主生活会材料
2014/12/15 职场文书
师德标兵事迹材料
2014/12/19 职场文书
无罪辩护词范文
2015/05/21 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js