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个相对比较漂亮的美化版单选框和复选框,希 ...
随机推荐
- maven报错 java.lang.RuntimeException: com.google.inject.CreationException: Unable to create injector, see the following errors
2 errors java.lang.RuntimeException: com.google.inject.CreationException: Unable to create injector, ...
- sql 脚本过大
先把sql脚本文件中的创建部分 剪切 出来执行,创建一个数据库 然后执行cmd命令 sqlcmd -S CAOHONGWEI -U sa -P p@ss!123 -d ...
- 安装Angulr CLI
参考文档 https://www.jianshu.com/p/327d88284abb http://blog.csdn.net/zhy13087344578/article/details/6074 ...
- Linux配置python环境2,安装python
安装锁需要的依赖包 sudo apt-get -y install gcc-5 g++-5 libc6-dev make build-essential libssl-dev zlib1g-dev l ...
- Chrome报错提示Unchecked runtime.lastError: The message port closed before a response was received.
经过查询,此错误是Chrome扩展插件引起的.由于Chrome修改了API接口,原来的请求被拦截.(Chrome 73 onwards disallows cross-origin requests ...
- Python 特点
优点 简单 -- Python 是一种代表简单主义思想的语言.阅读一个良好的 Python 程序就感觉像是在读英语一样,尽管这个英语的要求非常严格!Python 的这种伪代码本质是它最大的优点之一.它 ...
- K8S中Service
Service 的概念Kubernetes Service 定义了这样一种抽象:一个 Pod 的逻辑分组,一种可以访问它们的策略 —— 通常称为微服务. 这一组 Pod 能够被 Serv ...
- python数据分析-数据导入
1.导入CSV格式数据 import pandas data = pandas.read_csv("C:\\Users\\zhaosai\\Desktop\\进击的DBA\\谁说菜鸟不会数据 ...
- jmeter操作登录等简单的使用
一.登录 1.打开jmeter创建“线程组” 2.创建HTTP默认值 3.添加http默认值后,后边的http请求就可以省略填写部分内容 4.添加“HTTP信息管理头”在内添加名称:“Content- ...
- ACM之路(19)—— 主席树初探
长春赛的 I 题是主席树,现在稍微的学了一点主席树,也就算入了个门吧= = 简单的来说主席树就是每个节点上面都是一棵线段树,但是这么多线段树会MLE吧?其实我们解决的办法就是有重复的节点给他利用起来, ...