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 相关文章推荐
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
JS监听滚动和id自动定位滚动
Dec 18 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
基于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
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vuex入门最详细整理
2020/03/04 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python matplotlib可视化实例解析
2020/06/01 Python
应届毕业生求职信范文
2013/12/18 职场文书
物控部经理职务说明书
2014/02/25 职场文书
学历公证委托书
2014/04/09 职场文书
低碳生活倡议书
2014/04/14 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
教育教学读书笔记
2015/07/02 职场文书
小学副班长竞选稿
2015/11/21 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
Mysql排序的特性详情
2021/11/01 MySQL