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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
ES6 十大特性简介
Dec 09 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python软件都是免费的吗
2020/06/18 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
党员学习十八大感想
2014/01/17 职场文书
美发店5.1活动方案
2014/01/24 职场文书
电教室标语
2014/06/20 职场文书
欢迎标语大全
2014/06/21 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
民间借贷被告代理词
2015/05/23 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python