bootStrap-table之常用事件

1、onClickCell

参数:field, value, row, $element
说明:当单击某一格,就会触发该事件,所需参数如下: 
        - field:此格所在列的字段名 
        - value:此格的数据 
        - $element:此行的此列,就是此格(td)
例子:
$("#bootstrap-table-id").bootstrapTable({
    
    ...
    columns:[
    {field:'name',
     title:'姓名',
    },{}...],
    onClickCell:function(field, value, row, $element){
        //可以使用field判断点击了哪个colums里面的field。
        if(field=="name"){
            ...
        }
        //使用row可以获得上面存有字段的值:
        var myname=row.name
        
    }
})

2、onLoadSuccess

参数:data
说明:当所有数据被加载时触发
例子:
$("#bootstrap-table-id").bootstrapTable({
    
    ...
    columns:[
    {field:'name',
     title:'姓名',
    },{}...],
   onLoadSuccess:function(data){
   //data为当前页面加载所有数据的详细信息
   //如果分了5页,当前是第2页,则data是包含第二页所有数据。
       console.info(data)
   }
})

3、formatter

属性:data-formatter
类型:Function
默认值:undefined
作用描述:
需要此列的对象。 
某格的数据转换函数,需要三个参数: 
-value: field(字段名) 
-row:行的数据 
-index:行的(索引)index
注意:当value为undifined的时候,调用一些方法比如value.length会报错。
例子:
$("#bootstrap-table-id").bootstrapTable({
    
    ...
    columns:[
    {
     field:'id',
     title:'序号',
     formatter:function(value,row,index){
     //序号从1开始
         return index+1;
     }
    },
    {field:'',
     title:'操作',
     events:operateEvents,
     formatter:playButtonFunction
    },{}...],
    ...
})
playButtonFunction(value,row,index){
    return[
        '<a id="tableid" href="#aa" data-toggle=""><img src="img/bb.png" alt="" id="imgid"></a>'
    ].join("")
}

window.operateEvents={
    //触发点击事件
    "click #tableid":function(e,value,row,index){
      console.info(row)  
      //可以使用row获取本行各种属性值。
      
    }
}

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郝少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值