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();
})
layui 数据表格复选框实现单选功能的更多相关文章
- DataGridView复选框实现单选功能(二)
双击DataGridView进入事件 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventA ...
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框
视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)
一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- 如何让checkbox复选框只能单选
function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...
- 把复选框变成单选框(prop,attr的区别)
如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...
- 10个HTML5美化版复选框和单选框
单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...
随机推荐
- 八,kubernetes集群存储卷基础。
目录 存储卷 存储的分类 emptyDir 测试及使用 hostpath实例 Pod测试挂在共享NFS 写测试清单 测试 pv, pvc 创建几个PV 创建测试的Pod 和 PVC 存储卷 pod运行 ...
- 单节点FastDFS与Nginx部署
一.安装基本组件 1.安装编译需要的组件,必安装组件. yum install gcc-c++ 2.安装libevent函数库.pcre-devel zlib-devel必安装组件. yum ...
- C++之旋转矩阵和打印一个有规律的矩阵
旋转数组 描述: 某个图像通过一个整数组成的m*n矩阵表示,其中每个整数表示一个像素值.写出一种方法,根据flag变量的值将图像向右或者向左旋转90°.如果flag值为0,则向左旋转,如果flag为1 ...
- Hive动态分区和分桶(八)
Hive动态分区和分桶 1.Hive动态分区 1.hive的动态分区介绍 hive的静态分区需要用户在插入数据的时候必须手动指定hive的分区字段值,但是这样的话会导致用户的操作复杂度提高,而且在 ...
- [APIO2010] 算法竞赛竞赛经典 巡逻
原题链接 题目描述 在一个地区有 n 个村庄,编号为1,2,-,n. 有 n-1 条道路连接着这些村庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其他任一个村庄. 每条道路的长度 ...
- 22_5mybatis多表操作
1.表之间的关系 一对多 多对一 一对一 多对多 举例: 用户和订单就是一对多 订单和用户就是多对一 一个用户可以下多个订单 多个订单属于同一个用户 人和身份证号就是一对一 一个人只能有一个身份证号 ...
- 【PKUSC2018】最大前缀和
上午的国庆大阅兵有意思 Description https://loj.ac/problem/6433 Solution 看数据范围认解法 首先在每种情况出现概率相同的情况下, \(期望 \times ...
- C#学习之Timothy Liu
原文出自 本文摘录了一些值得学习的地方. 1.对一个程序来说,静态指编辑期.编译期,动态指运行期. 静态时装在硬盘里,动态时装在内存里. 2.反射示例 通过反射获得类的属性和方法. static vo ...
- 【CUDA 基础】3.3 并行性表现
title: [CUDA 基础]3.3 并行性表现 categories: - CUDA - Freshman tags: - nvprof toc: true date: 2018-04-15 21 ...
- 项目部署中,tomcat报java.lang.OutOfMemoryError: PermGen space
原因: PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader ...