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个相对比较漂亮的美化版单选框和复选框,希 ...
随机推荐
- python网络编程:TCP通讯模板、粘包及解决方案、自定义报头
一.TCP通讯模板 二.远程CMD程序 三.解决粘包问题 四.解决粘包问题2 一.TCP通讯模板 TCP客户端 import socket c = socket.socket() # 连接服务器 c. ...
- cubase 反向音频处理
- 第七章 路由 76 路由传参-使用params方式传递路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 修改Jenkins目录
注意:在Jenkins运行时是不能更改的. 请先将Jenkins停止运行. 1.windows环境下更改JENKINS的主目录 Windows环境中,Jenkins主目录默认在C:\Documents ...
- Oracle之:Function :getdate()
create or replace function getdate(sp_date varchar) return date is Result date; begin if LENGTH(sp_d ...
- Python获取本机所有IP地址
import socket # 查看当前主机名 print('当前主机名称为 : ' + socket.gethostname()) # 根据主机名称获取当前IP print('当前主机的IP为: ' ...
- 一些C++编码规范
1.成员变量是引用类型,头文件只需向前声明对应类,不需包含类头文件,在实现文件中需要包含: 2.头文件声明变量和函数按照pulic.protected.private顺序: 3.成员变量声明,加 &q ...
- 编译原理--02 自顶向下、自底向上的LR分析复习(清华大学出版社第3版)
前言 目录 01 文法和语言.词法分析复习 02 自顶向下.自底向上的LR分析复习 03 语法制导翻译和中间代码生成复习 04 符号表.运行时存储组织和代码优化复习 第4章 自顶向下的语法分析方法 确 ...
- BZOJ 4269: 再见Xor 线性基+贪心
Description 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. Input 第一行一个正整数N. 接下来一行N个非负整数. ...
- gulp 使用指南
只放一个链接是不是太不负责任 https://gulpjs.com/ https://blog.csdn.net/guang_s/article/details/84664769 gulp安装过程在此 ...