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个相对比较漂亮的美化版单选框和复选框,希 ...
随机推荐
- LInux基于nginx与OpenSSL实现https访问
注意!!首先在nginx安装时添加--with-http_ssl_module模块,否则将会报错,只能从头开始了 自建证书: 通过openssl命令(软件包:openssl :openssl-deve ...
- (六)buildroot使用详解
为什么要使用buildroot? (文件系统搭建,强烈建议直接用buildroot,官网[http://buildroot.uclibc.org/]上有使用教程非常详细)文件系统通常要包含很多第三方软 ...
- 亲测,将自己的项目部署到Github下
转载内容,其实就是为了方便自己不用再去百度 感谢这位前辈 链接
- qunee 流动的关系
<!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> < ...
- Java语言基础(11)
1 构造方法 构造方法是一种特殊的方法,只有在创建对象的时候才被调用,用来执行初始化的操作,比如给属性赋值... 1) 构造方法名字跟类名一致,没有返回值也就没有返回值类型 2) 格式: 类名(参数列 ...
- View相关面试问题-事件分发面试问题讲解
为什么会有事件分发机制: 安卓上面的View是树形结构的,View可能会重叠在一起,当我们点击的地方有多个View都可以响应的时候,这个点击事件应该给谁呢?为了解决这一问题,就有了事件分发机制.用图来 ...
- BZOJ4353 Play with tree[树剖]
复习几乎考不到的树剖.维护min以及min个数,打set和add标记即可,注意set优先级优于add. #include<iostream> #include<cstdio> ...
- ESP8266—“ICACHE_FLASH_ATTR”宏——解释含义
const uint8 MyArr[1024] ICACHE_RODATA_ATTR = {0}; void MyFun() ICACHE_FLASH_ATTR { } 这种 ICACHE 开头的宏作 ...
- C# 数据类型转化为byte数组
short数据与byte数组互转 public byte[] ShortToByte(short value) { return BitConverter.GetBytes(value); } pub ...
- HDU 6047 - Maximum Sequence | 2017 Multi-University Training Contest 2
/* HDU 6047 - Maximum Sequence [ 单调队列 ] 题意: 起初给出n个元素的数列 A[N], B[N] 对于 A[]的第N+K个元素,从B[N]中找出一个元素B[i],在 ...