layui 数据表格复选框实现单选功能的例子


Posted in Javascript onSeptember 19, 2019

我就废话不多说了,大家直接看代码吧!希望能帮助到你

如下所示:

//点击选中(单选)
//单击行勾选checkbox事件
  $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
    var index = $(this).attr('data-index');
    var tableBox = $(this).parents('.layui-table-box');
    //存在固定列
    if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
      tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
    } else {
      tableDiv = tableBox.find(".layui-table-body.layui-table-main");
    }
    //获取已选中列并取消选中
    var trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
      for(var i = 0;i<trs.length;i++){
       var ind = $(trs[i]).attr("data-index");
       if(ind!=index){
       var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
        if (checkCell.length>0) {
          checkCell.click();
        }
       }
      }
    //选中单击行
    var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
    if (checkCell.length > 0) {
      checkCell.click();
    }
    });
  $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    e.stopPropagation();
  });
//点击选中(多选)
//单击行勾选checkbox事件
  $(document)
      .on(
          "click",
          ".layui-table-body table.layui-table tbody tr",
          function() {
            var obj = event ? event.target : event.srcElement;
            var tag = obj.tagName;
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents(".layui-table-box");
            //存在固定列
            if (tableBox
                .find('.layui-table-fixed.layui-table-fixed-l').length > 0) {
              tableDiv = tableBox
                  .find('.layui-table-fixed.layui-table-fixed-l');
            } else {
              tableDiv = tableBox
                  .find('.layui-table-body.layui-table-main');
            }
            var checkCell = tableDiv
                .find('tr[data-index=' + index + ']')
                .find(
                    "td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length > 0) {
              checkCell.click();
            }
          });
  $(document).on("click",
      "td div.laytable-cell-checkbox div.layui-form-checkbox",
      function(e) {
        e.stopPropagation();
      })

以上这篇layui 数据表格复选框实现单选功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue实现评论列表功能
Oct 25 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 #Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 #Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 #Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 #Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
开发用到的js封装方法(20种)
2018/10/12 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python 面试中 8 个必考问题
2018/11/16 Python
ipython和python区别详解
2019/06/26 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python 实现按对象传值
2019/12/26 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
如何查看python关键字
2021/01/17 Python
世界经理人咨询有限公司面试
2014/09/23 面试题
采购部部长岗位职责
2014/02/06 职场文书
北京申奥口号
2014/06/19 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
详解Python类和对象内容
2021/06/22 Python
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS