bootstrap table表格插件使用详解

 更新时间:2017年05月08日 14:07:32   作者:木畂  
这篇文章主要为大家详细介绍了bootstrap table表格插件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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实现了照片拖拽点击置顶的照片墙代码

    这篇文章主要介绍了javascript实现了照片拖拽点击置顶的照片墙代码,效果非常不错,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • JavaScript定时器设置、使用与倒计时案例详解

    JavaScript定时器设置、使用与倒计时案例详解

    这篇文章主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下
    2019-07-07
  • My Desktop :) 桌面式代码

    My Desktop :) 桌面式代码

    My Desktop 桌面式 代码
    2008-12-12
  • javascript算法学习(直接插入排序)

    javascript算法学习(直接插入排序)

    假设待排序的记录存放在数组R[1..n]中。初始时,R[1]自成1个有序区,无序区为R[2..n]。从i=2起直至i=n为止,依次将R[i]插入当前的有序区R[1..i-1]中,生成含n个记录的有序区。
    2011-04-04
  • 微信小程序实现tab组件切换动画

    微信小程序实现tab组件切换动画

    tab相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tab的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • JS双向链表实现与使用方法示例(增加一个previous属性实现)

    JS双向链表实现与使用方法示例(增加一个previous属性实现)

    这篇文章主要介绍了JS双向链表实现与使用方法,在之前链表的基础上增加一个previous属性实现的双向链表功能,需要的朋友可以参考下
    2019-01-01
  • uniapp 如何设置 tabbar 的 midButton 按钮

    uniapp 如何设置 tabbar 的 midButton 按钮

    在UniApp开发中,设置TabBar的midButton按钮可以增加用户交互的便利性,本文介绍了在App.vue中监听事件的方法,并提供了官方文档链接作为参考,通过这种方式可以实现TabBar中的特殊按钮功能,提升应用的用户体验
    2024-10-10
  • 微信小程序表单验证功能完整实例

    微信小程序表单验证功能完整实例

    这篇文章主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下
    2017-12-12
  • 子窗体与父窗体传值示例js代码

    子窗体与父窗体传值示例js代码

    子窗体与父窗体之见互相传值实现使用中很频繁,本文以一个小示例抛砖引玉,希望大家可以举一反三
    2013-08-08
  • 前端axios下载excel文件(二进制)的处理方法

    前端axios下载excel文件(二进制)的处理方法

    新接了项目,遇到这样的需求,通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件。接下来通过实例代码给大家分享前端axios下载excel文件(二进制)的处理方法,一起看看吧
    2018-07-07

最新评论