layui默认选中table的CheckBox复选框方法
作者:readyyy 发布时间:2024-11-18 16:25:34
标签:layui,table,CheckBox,复选框
方法一:如何根据条件判断是否默认选中table表格前面的复选框
table.render({
elem: '#userTable'
, url: '../sysRole/getUserList'
, title: '用户列表'
, page: true //开启分页
, cols: [[
{type:'checkbox'}
, {field: 'userName',sort: true, title: '用户名称'}
, {field: 'account',sort: true, title: '登录账户'}
, {field: 'deleteFlg',sort: true, title: '是否启用'}
]]
,done: function(res, page, count){
//可以自行添加判断的条件是否选中
//这句才是真正选中,通过设置关键字LAY_CHECKED为true选中,这里只对第一行选中
res.data[0]["LAY_CHECKED"]='true';
//下面三句是通过更改css来实现选中的效果
var index= res.data[0]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
}
});
方法二:checkFuntion()当翻页或加载时判断是否选中复选框,input第一行禁用,第二行选中,第三行未选中
<script>
//存储选中的设备Id
var checkId=[];
</script>
<table class="layui-hide" id="deviceList" lay-filter="deviceFilter"></table>
//模板页定义复选框,可以直接写js控制是否选中
<script type="text/html" id="checkboxTpl">
{{#
function checkFuntion(arry){
var isTrue=false;
for(var index in arry){
if(arry[index]==d.id){
isTrue=true;
break;
}
}
return isTrue;
};
if(d.deviceAreaId!=null){ }}
<input type="checkbox" lay-skin="primary" value="{{d.id}}" lay-filter="deviceIdFilter" disabled>
{{# } else {
if(checkFuntion(checkId)){ }}
<input type="checkbox" lay-skin="primary" id="{{d.id}}" isCheck="true" value="{{d.id}}" lay-filter="deviceIdFilter" checked>
{{# } else { }}
<input type="checkbox" lay-skin="primary" id="{{d.id}}" isCheck="false" value="{{d.id}}" lay-filter="deviceIdFilter">
{{# } }}
{{# } }}
</script>
table.render({
elem: '#deviceList'
, url: '../devices/findALL' //数据接口
, title: '仪表表'
,height:'480px'
,where:{"gatewaySN":selectPid,"channel":searchId}
, page: true //开启分页
, cols: [[ //表头
{field:'id',width: '5%',templet: '#checkboxTpl',title: '<div id="checkAll" οnclick="selectAll()" all="false" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div></div>'}
// ,{field: 'id', title: 'ID', width: '5%', sort: true, title: 'ID'}
, {field: 'deviceName', width: '25%', sort: true, title: '仪表名称'}
, {field: 'type', width: '15%', sort: true, title: '仪表类型'}
, {field: 'entryName', width: '15%', sort: true, title: '能耗分项'}
, {field: 'deviceDesc', width: '40%', sort: true, title: '仪表描述'}
]]
,done: function(res, page, count){
//每次翻页或者重载时判断是否全选
if ( $('input[isCheck="false"]').length==0){
$("#checkAll").attr('all','true');
$("#checkAll").addClass('layui-form-checked');
}else {
$("#checkAll").attr('all','false');
$("#checkAll").removeClass('layui-form-checked');
}
}
});
//全选按钮事件
function selectAll() {
var checkAll = $("#checkAll");
if (checkAll.attr('all') == "false") {
console.log($('input[isCheck="false"]'));
$('input[isCheck="false"]').each(function () {
$(this).next().click();
});
checkAll.attr('all', 'true');
checkAll.addClass('layui-form-checked');
} else if (checkAll.attr('all') == "true") {
$('input[isCheck="true"]').each(function () {
$(this).next().click();
});
checkAll.attr('all', 'false');
checkAll.removeClass('layui-form-checked');
}
}
来源:https://blog.csdn.net/readyyy/article/details/82971723


猜你喜欢
- JDBC基础入门概念JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java
- Python的zip函数示例1:x = [1, 2, 3]y = [4, 5, 6]z = [7, 8, 9]xyz = zip(x, y,
- 1 通过System.DBNull判断,网上大部分都使用这个方法。DataTable dt;
- 1、文件添加方式:pycharm提供了一个在新建文件自动生成文件头注释的功能,可以实现自动生成运行环境,作者、日期等必要信息,使用比较方便,
- 本文实例讲述了Python3实现从文件中读取指定行的方法。分享给大家供大家参考。具体实现方法如下:# Python的标准库linecache
- 前几天玩了玩Google的Map API,感觉还不错,很简单。但凡有过任何编程经验的同学,看完以下的教程,都可以在10分钟内掌握它的主要功能
- UBB代码对于经常上论坛的朋友来说是最熟悉不过了。这里我不多说了,关于怎么实现UBB转换,不了解的朋友
- 0.摘要我们将一个list传入函数后,函数内部对实参修改后,形参也会随之改变。本文将主要介绍这种错误的现象、原因和解决方法。1.代码示例de
- 本文实例为大家分享了javascript实现花样轮播效果的两种实现方法,供大家参考,具体内容如下第一种:简单的带按钮的轮播介绍:左右按钮控制
- 控制资源访问前文提到threading库在多线程时,对同一资源的访问容易导致破坏与丢失数据。为了保证安全的访问一个资源对象,我们需要创建锁。
- 最佳方式:根据map的长度,新建一个数组,遍历map逐个压入方法1(效率很高):func getKeys1(m map[int]int) [
- 昨天我突发奇想,想用display:inline来实现三列的布局可是搞了半天就是不行。但是理论上是可以的呀(后来才发现是不理解的不深刻,我的
- 最近服务器时不时出现Nginx 502 Bad Gateway,如果在电脑旁边还好,要是半夜或者出去了,怎么办?没关系,写个脚本检测服务状态
- 在使用python函数print()时,如下代码会出现输出无法显示的问题:分三次在一行输出 123print(1, end="&q
- 一般情况下,当数据表中,莫一列被设置成了标识列之后,是无法向标识列中手动的去插入标识列的显示值。但是,可以通过设置SET IDENTITY_
- 搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6、7、8/firefox/Chro
- 一个Javascript 的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。特别适合多表查询的排序。加上<tbod
- MySQL 中,可以为某张表指定多个索引,但在语句具体执行时,选用哪个索引是由 MySQL 中执行器确定的。那么执行器选择索引的原则是什么,
- 本文实例讲述了Python3爬虫学习之MySQL数据库存储爬取的信息。分享给大家供大家参考,具体如下:数据库存储爬取的信息(MySQL)爬取
- 让我们来看一些例子:--获取表的count信息select count(*) from T with(nolock)--获取特定值的coun