Bootstrap-table formatter

说明

本篇记录使用bootstrap-tableformatter列选项来控制数据的显示。
这个formatter也就是对获取到的数据进行格式化的意思。
查看官网给的api,看下图,这个列选项是Function 类型,它有四个参数,分别是value(data中分配到的值),row(所在行,可以访问行内其他field的值),index(索引),field(对应的field)
在这里插入图片描述
如下图所示 根据用户不同权限显示不同的操作按钮 ,

  • 管理员显示Modify和Detail按钮 ,
  • 普通用户只显示Detail按钮。
管理员

在这里插入图片描述

普通用户

在这里插入图片描述

设置

在需要显示的field下设置formatterevents
在这里插入图片描述

添加按钮函数

添加按钮函数和事件要放在初始化之前。
在初始化里写事件太臃肿,把它分离出来,并把参数传递给它。
$.inArray(("admin"), right)>=0判断某字符是否存在与某数组中,存在返回索引值,不存在则返回-1

 function addButton(value, row, index, field) {
   
     var right = getRight().split(',');
     if ($.inArray(("admin"), right)>=0) {
   
         return '<button type="button" id="modify" class="btn btn-success">Modify</button><button type=
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
bootstrap-table中嵌入日期控件可以通过使用第三方插件来实现。常用的日期控件插件有bootstrap-datepicker和datetimepicker。以下是使用bootstrap-datepicker插件的步骤: 1. 在页面中引入bootstrap-datepicker的css和js文件。 2. 在表格中需要嵌入日期控件的列中添加data-date-format属性,指定日期格式。 3. 在表格初始化时,对需要嵌入日期控件的列进行配置,使用formatter属性指定日期控件的html代码。 4. 在js代码中初始化日期控件,使用datepicker()方法。 下面是一个示例代码: ```html <!-- 引入bootstrap-datepicker的css和js文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> <table id="table"> <thead> <tr> <th>姓名</th> <th>生日</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td data-date-format="yyyy-mm-dd" data-field="birthday"></td> </tr> <tr> <td>李四</td> <td data-date-format="yyyy-mm-dd" data-field="birthday"></td> </tr> </tbody> </table> <script> $(function() { // 对需要嵌入日期控件的列进行配置 $('#table').bootstrapTable({ columns: [{ field: 'name', title: '姓名' }, { field: 'birthday', title: '生日', formatter: function(value, row, index) { return '<input type="text" class="form-control datepicker" value="' + value + '">'; } }] }); // 初始化日期控件 $('.datepicker').datepicker({ format: 'yyyy-mm-dd', autoclose: true }); }); </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值