• layui 数据表格复选框实现单选功能


    //点击选中(单选)
    //
    单击行勾选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(); })
  • 相关阅读:
    用JS实现汉字转拼音
    jQuery Validate验证框架详解
    移动前端自适应适配布局解决方案和比较
    js获取当前日期时间“yyyy-MM-dd HH:MM:SS”
    jQuery cookie
    dataTable 从服务器获取数据源的两种表现形式
    dataTable 参数说明
    如何在HTML网页中显示HTML标签内容?
    java中构造函数前用public修饰与没有任何修饰符相比,有什么区别?
    面向对象设计
  • 原文地址:https://www.cnblogs.com/pzx-java/p/9010352.html
Copyright © 2020-2023  润新知