layui table勾选框的修改_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第一行禁用,第二行选中,第三行未选中

//存储选中的设备Id

var checkId=[];

//模板页定义复选框,可以直接写js控制是否选中

{{#

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){ }}

{{# } else {

if(checkFuntion(checkId)){ }}

{{# } else { }}

{{# } }}

{{# } }}

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: '

'}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui-table 中,如果要获取勾选的行数据,可以通过监听表格的 checkbox 事件来获取。具体的实现步骤如下: 1. 给表格设置 lay-filter 属性,用于监听表格事件: ```html <table id="demo" lay-filter="test"></table> ``` 2. 监听表格的 checkbox 事件: ```javascript table.on('checkbox(test)', function(obj){ var checkStatus = table.checkStatus('demo'); var data = checkStatus.data; console.log(data); }); ``` 3. 在事件处理函数中,通过 table.checkStatus 方法获取所有勾选的行数据,并打印输出。 完整示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui表格复选框勾选的行数据</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use('table', function(){ var table = layui.table; // 渲染表格 table.render({ elem: '#demo', url: '/demo/table/user/', page: true, cols: [[ {type:'checkbox'}, {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'email', title:'邮箱', width:150}, {field:'sex', title:'性别', width:80, sort:true}, {field:'city', title:'城市', width:100}, {field:'sign', title:'签名', width:200}, {field:'experience', title:'积分', width:80, sort:true}, {field:'score', title:'评分', width:80, sort:true}, {field:'classify', title:'职业', width:100}, {field:'wealth', title:'财富', width:135, sort:true}, ]] }); // 监听表格的 checkbox 事件 table.on('checkbox(test)', function(obj){ var checkStatus = table.checkStatus('demo'); var data = checkStatus.data; console.log(data); }); }); </script> </body> </html> ``` 在这个示例中,我们监听了表格的 test 事件,然后在事件处理函数中通过 table.checkStatus 方法获取所有勾选的行数据,并将其输出到控制台中。你可以根据自己的具体需求,对获取到的数据进行进一步处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值