layui--table checkbox 默认选中

方法一:在后台的data数据中设置好checked值

  1. 返回数据格式如下:
{
	"code": 0,
	"msg": "",
	"count": 2,
	"data": [{
		"rolename": "系统管理员",
		"roleid": "1",
		"checked": true //重点
	}, {
		"rolename": "普通员工",
		"roleid": "21",
		"checked": false //重点
	}]
}
  1. 需要在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');
			          } 
				 });
			}
		}
	});
});
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui-table 中添加表头筛选的方法如下: 1.设置表头筛选的数据 可以通过设置`toolbar`属性来设置表头的筛选数据,例如: ```javascript var tableIns = table.render({ elem: '#test' ,url:'/demo/table/user/' ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'ID', width:80, sort: true} ,{field:'username', title:'用户名', width:120} ,{field:'email', title:'邮箱', width:150} ,{field:'sign', title:'签名'} ,{field:'sex', title:'性别', width:80} ,{field:'city', title:'城市', width:100} ,{field:'experience', title:'积分', width:80, sort: true} ,{field:'logins', title:'登入次数', width:100, sort: true} ,{field:'status', title:'状态', width:100, sort: true} ,{field:'ip', title:'IP', width:120} ,{field:'create_time', title:'创建时间', width:150, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] ,page: true }); ``` 在上面的代码中,`toolbar`属性绑定了一个左侧模板(即下面代码中的`#toolbarDemo`),在该模板中可以设置表头的筛选数据,例如: ```html <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">添加</button> <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button> </div> <div class="layui-inline"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city"> <option value="">全部</option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">状态</label> <div class="layui-input-inline"> <select name="status"> <option value="">全部</option> <option value="0">正常</option> <option value="1">禁用</option> </select> </div> </div> </script> ``` 在上面的代码中,我们设置了两个下拉框,分别用于筛选城市和状态。 2.监听表头筛选事件并重新加载表格数据 在表头筛选数据改变时,我们需要监听表头的`lay-filter`属性,并重新加载表格数据。在下面的示例中,我们监听了两个下拉框的`select`事件,并重新加载了表格数据: ```javascript //监听表头筛选数据改变事件 table.on('toolbar(test)', function(obj){ var city = $('select[name="city"]').val(); var status = $('select[name="status"]').val(); table.reload('test', { where: { //设定异步数据接口的额外参数,任意设 city: city, status: status } ,page: { curr: 1 //重新从第 1 页开始 } }); }); ``` 在上面的代码中,我们通过`$('select[name="city"]').val()`和`$('select[name="status"]').val()`获取了两个下拉框的值,并重新加载了表格数据。其中,`table.reload()`方法中的`test`参数表示表格的ID,可以根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值