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();
    })
}
原文链接:segmentfault.com

上一篇:kkw学习css的过程,第7天,2D转换
下一篇:如何让你的vue组件更好的被使用(Vue-Styleguidist中文文档)

相关推荐

  • 防止contenteditable加入<DIV>进入铬

    iConnor(https://stackoverflow.com/users/1907358/iconnor)提出了一个问题:Prevent contenteditable adding on E...

    2 年前
  • 配置electron中puppeteer executablePath的正确姿势

    TL; NR 轻量, remote调用(使用本地chrome) = 将chromium整合进安装包(需要asar打包时排除chromium), macOS下验证失败 = 这个问题在...

    1 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    24 天前
  • 读懂immutable-js中的Map数据结构

    本文受深入探究Immutable.js的实现机制(https://juejin.im/post/5b9b30a35188255c6418e67c)这篇文章启发,结合自己对Map源码的解读,谈谈我对im...

    2 年前
  • 详解Immutable及 React 中实践

    有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。

    2 年前
  • 设置光标位置contenteditable <DIV>

    CommunityGONeale(https://stackoverflow.com/users/1/community)提出了一个问题:Set cursor position on contentE...

    2 年前
  • 记录element ui table表格spanMethod动态合并列

    先放几个表格的图看看 表格一: 预览:https://jsfiddle.net/xmwh/2vh...(https://jsfiddle.net/xmwh/2vhuwofm/) element ui...

    1 年前
  • 组件化页面:封装el-table

    项目做的越来越多,重复的东西不断的封装成了组件,慢慢的,页面就组件化了,只需要定义组件配置数据,使用就好了,这是一件非常舒服的事情,这篇文章主要和大家讲讲如何对elementui中的eltable进行...

    1 年前
  • 精读《Tableau 入门》

    1. 引言 引用著名瑞典统计学家 Hans Rosling 的一句话:想法来源于数字、信息,再到理解。 分析数据的最好方式是可视化,因为可视化承载的信息密度更高,甚至可以从不同维护对数据进行交互...

    10 个月前
  • 简单的html5与Rxjs实现table同时固定列和表头(for angular)

    凡是参与大型项目开发,或者是企业级的系统,经常会遇到数据复杂,数据量大的问题。通常需要前端呈现大量的数据,而我们通常都会使用table去呈现。一目了然。可能很多人会问,现在的组件库不是很成熟了吗,各种...

    2 个月前

官方社区

扫码加入 JavaScript 社区