1. 首页
  2. IT资讯

00009 – layui 表格table 点击行的任意列即选中改行,其它行取消选择

table :

var tableIns = table.render({
   elem:'#workTaskLogListTable'
   ,url: ctx+'/task/workTaskLog/query'
   ,error:admin.error
   ,cellMinWidth: 80
   ,toolbar: '#workTaskLogListTable-toolbar'
          ,defaultToolbar: [{
              title: '条件过滤' //标题
              ,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用
              ,icon: 'layui-icon-search' //图标类名
          },
              'filter', 'print', 'exports']
   ,cols: [[
      {type: 'checkbox'/*, fixed: 'left'*/}
      ,{field:'content', title: '日志内容', align: 'center',width:130 }
      ,{field:'userName', title: '操作人', align: 'center',width:130 }
      ,{field:'status', title: '状态', align: 'center',width:130,templet:tplStatus}
      ,{field:'createTime', title: '创建时间', align: 'center',width:160,templet:tplCreateTime}
      ,{title:'操作', toolbar: '#workTaskLogListTable-bar', width:150}
   ]]
   ,page: true
   ,limit: 10
   ,limits: layui.setter.limits
   ,done: function(res, curr, count){
   }
   ,height: 'full-110'
});

说明:{type: ‘checkbox’/, fixed: ‘left’/} , 要是功能有效,即表的列 不能有fixed属性。

调用方法:

admin.tableRowCheckToggle();

方法体为:

admin.tableRowCheckToggle = function () {
    $('body').on('click', '.layui-table-body tr', function(e){
        $('.layui-form-checkbox', this).click();
        $('.layui-form-checkbox.layui-form-checked', this.parent).click();
        $('.layui-form-checkbox', this).click();

    })
    $('body').on('click', '.layui-form-checkbox', function(e){
        e.stopPropagation();
    })
}

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/197807.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code