layui的table checkbox 默认选中设置

news/2024/7/23 23:25:19 标签: layui, 前端, javascript

第一种:在后台的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');
			          } 
				 });
			}
		}
	});
});


http://www.niftyadmin.cn/n/1598432.html

相关文章

Linux 内核--fork()函数创建进程

本文分析基于Linux 0.11内核,转载请表明出处http://blog.csdn.net/yming0221/archive/2011/06/05/6527337.aspx Linux在move_to_user_mode()之后,进程0通过fork()产生子进程实际就是进程1(init进程)。 其中fork()是通过内嵌汇编的…

layui table数据表格前端分页

下面js代码是在前端进行分页,主要是利用表格插件的parseData参数,该参数触发是在请求数据回来后,但还未显示在表中时触发的。 layui.use(table, function(){var table layui.table;table.render({elem: #gridTable ,url: contextPath /pag…

解决LayUI数据表格复选框不居中显示的问题

在样式文件中增加如下代码: . layui-table-cell .layui-form-checkbox[lay-skin"primary"]{top: 50%; transform: translateY(-50%); }

文档带来的思考和对文档的修改

前几天云姐验收了文档,写了验收收费系统的验收报告,和一些心得体会。 首先,没有重视文档,感觉文档对于代码和图来说在心里没有那么重要。 其实嘴里一直在说文档的重要性,重要性,比什么都重要,…

springboot编写restful Api——1.什么是restfuleApi

rest是设计风格,不是标准,按照这个风格设计出来的api就是restful API;

springboot编写restful Api——2.maven简介

maven是一个项目管理的工具,可以管理项目的依赖、生成文档、编译打包等等 main:所有的java、resources都会打包到项目的target目录中, test:打包前运行测试用例,最终打包是没有test下边的;

初次接触YH系统维护

今天是我第一次接触YH系统维护.初步感觉:不适应.还有就是心虚,不懂的很多.因为自己几乎还没有接触过YH系统,不是很了解这个系统的业务流程.不过伟东说让我们在维护系统的过程中对系统进行了解,并不断的加深. 今天上午从九点多开始就进行问题的解决.主要问题是在后台添加道菜目后…

GPIO的上拉电阻的作用

GPIO的上拉电阻的作用除了驱动能力会增强外 当设置GPIO为输入状态时, 产品做高温实验,温度升高造成了GPIO检测的输入状态不对, 是否是上拉电阻的原因??? 上拉电阻和下拉电阻 上拉电阻: 1、…