layui的table checkbox 默认选中设置
layui表格默认选中某条记录的方式
·
第一种:在后台的data数据中设置好checked值
1.返回数据格式如下:
{
"code": 0,
"msg": "",
"count": 2,
"data": [{
"rolename": "系统管理员",
"roleid": "1",
"checked": true //重点
}, {
"rolename": "普通员工",
"roleid": "21",
"checked": false //重点
}]
}
2.需要在table.render()上面添加:
table = $.extend(table, {config: {checkName: ‘checked’}});
layui.use('table', function(){
var $ = layui.$;
var table = layui.table;
//使用table前加上下面这句
table = $.extend(table, {config: {checkName: 'checked'}});
table.render({
...
});
});
意: 后台反馈回来的checked包装格式不要将true或false包装成字符串哦,layui处理会有问题。
第二种:在后台的data数据中设置好LAY_CHECKED值
返回数据格式如下:
{
"code": 0,
"msg": "",
"count": 2,
"data": [{
"LAY_CHECKED": true,
"rolename": "系统管理员",
"roleid": "1"
}, {
"LAY_CHECKED": true,
"rolename": "普通员工",
"roleid": "21"
}]
}
第三种:done回调函数设置checked模拟选中(一),后台数据不做任何处理
layui.use('table', function(){
var $ = layui.$;
var table = layui.table;
//使用table前加上下面这句
table = $.extend(table, {config: {checkName: 'checked'}});
table.render({
id : 'roleList'
,...
,done : function(res, curr, count){
if( pUserRoleArray != undefined ){
var roleArray = pUserRoleArray.split(',');
//遍历集合
layui.each(res.data, function(index,item){
//将获取的选中行数据进行遍历
//array.indexOf 此方法判断数组中是否存在某个值,如果存在,则返回数组元素的下标,否则返回-1
if( roleArray.indexOf(''+item.roleid+'')>-1 ){
//点击去属性 lay-id='表格id'; index:要回显的行数下标,从0开始
$("div[lay-id='roleList'] td .layui-form-checkbox").eq(index).click();
}
});
}
}
});
});
第四种:done回调函数设置checked模拟选中(二),后台数据不做任何处理
layui.use('table', function(){
var $ = layui.$;
var table = layui.table;
//使用table前加上下面这句
table = $.extend(table, {config: {checkName: 'checked'}});
table.render({
id : 'roleList'
,...
,done : function(res, curr, count){
if( pUserRoleArray != undefined ){
var roleArray = pUserRoleArray.split(',');
//遍历集合
layui.each(res.data, function(index,item){
//将获取的选中行数据进行遍历
//array.indexOf 此方法判断数组中是否存在某个值,如果存在,则返回数组元素的下标,否则返回-1
if( roleArray.indexOf(''+item.roleid+'')>-1 ){
//第一步:设置LAY_CHECKED (若不设置此操作,在获取选中值时将取到空)
roleTableData[index]["LAY_CHECKED"]='true';
//第二步:获取属性 lay-id='table'==表格id;设置checked 并 添加class属性(以下两步是为了实现选中效果)
$("div[lay-id='roleList'] tr[data-index=" + index + "] input[type='checkbox']").prop('checked', true);
$("div[lay-id='roleList'] tr[data-index=" + index + "] input[type='checkbox']").next().addClass('layui-form-checked');
}
});
}
}
});
});
更多推荐
已为社区贡献6条内容
所有评论(0)