Layui禁止表格部分复选框，layui禁止表格自带第一列复选框，layui禁止表格部分复选框，layui获取表格复选框选中数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了Layui禁止表格部分复选框，layui禁止表格自带第一列复选框，layui禁止表格部分复选框，layui获取表格复选框选中数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

禁止某些行可以勾选操作，及选中后的操作和行操作

效果

Layui禁止表格部分复选框，layui禁止表格自带第一列复选框，layui禁止表格部分复选框，layui获取表格复选框选中数据

实现

执行一个table示例

<table id="data_table" class="layui-hide" lay-filter="data_table"></table>

cols 的第一列就是需要重写的复选框

table.render({
	elem : '#data_table',
	id : 'data_table',
	url : ctxPath+'sys/user/select',
	title : '数据列表',
	height:'full-60', // 可视自适应
	//size:"sm",
	limit: 15, // 默认页数，非页码
	limits: [10, 15, 20, 40, 30, 50, 60, 70, 80, 90, 100],
	page : true,
	toolbar : "#toolberLeft", // 表头按钮
	cols : [[
		// {type : 'checkbox'}, // , fixed : 'left' , // 浮动
		{
			templet: "#toolCheck",
			title: '<input type="checkbox" name="layTableAllChoose" lay-skin="primary" lay-filter="layTableAllChoose">',
			minWidth: 40,
		},
		{field : 'id', title : '照片', align : 'center', minWidth: '80',
			templet: function (d) {
                var src = ctxPath+d.img+"?v="+Math.random();
                return '<img width="45" style="border-radius: 5px;" height="45" id="img_'+d.id+'" src="'+src+'" οnerrοr="errorImg(this)"/>';
			}
		},
		{field : 'name', title : '姓名', minWidth: '80', align : 'center'},
		{field : 'sex', title : '性别', minWidth: '80', sort : true, align : 'center',
			templet: function (d) {
				if(d.sex == 1){
					return '男'
				}else if(d.sex == 2){
					return '女'
				}else {
					return '其他';
				}
			}, hide: false // 不显示
		},
		{field : '', align : 'center', minWidth: '180', title : '操作', toolbar : '#toolRow'} // 操作
	]]
	,done:function(result,currPage,count){ // 表格加载完毕回调
		tempTableList = result.data;
	}
});

其中templet: "#toolCheck"的标签块

<script type="text/html" id="toolCheck">
    {{#  if(d.powerCount <= 0){ }}
        <input type="checkbox" name="layTableCheckbox" lay-skin="primary">
    {{#  } }}
</script>

监听全选重写

form.on("checkbox(layTableAllChoose)", function () {
	var status = $(this).prop("checked");
	$.each($("input[name=layTableCheckbox]"), function (i, value) {
		$(this).prop("checked", status);
	});
	form.render();
});

获取复选框选中的值，tempTableList当前列表返回的数组

var arr = [];
$.each($("input[name=layTableCheckbox]:checked"), function (i, value) {
	var index = $(this).parents('tr').attr('data-index');
	arr.push(tempTableList[Number(index)].id);
});
arr.join(",") // 转成逗号隔开字符串

以上即可！

下面是其他相关的使用

监听行复选框点击（如果没有重写复选框就可以用）

table.on('checkbox(data_table)', function(obj){
	var checkStatus = table.checkStatus('data_table');
	var checkList = checkStatus.data;

});

示例表格中的toolbar : “#toolberLeft”, // 表头按钮

标签块

<script type="text/html" id="toolberLeft">
    <div class="layui-form">
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-event="search"><i class="layui-icon">&#xe615;</i>搜索</a>
    </div>
</script>

js中

table.on('toolbar(data_table)',  function(obj) {
	if (obj.event === 'search') {

	}else if(obj.event === 'add'){

	}else if(obj.event === 'edit'){
		var checkStatus = table.checkStatus('data_table');
		//checkStatus.data[0].id // 选中的行

	}else if(obj.event === 'delete'){
		var checkStatus = table.checkStatus('data_table');
		//checkStatus.data // 选中的集
	}
})

示例表格中的toolbar : ‘#toolRow’// 操作

标签块

<script type="text/html" id="toolRow">
    <a class="lay-table-btn" lay-event="detail"><i class="layui-icon">&#xe705;</i>查看</a>
    {{#  if(d.powerCount <= 0){ }}
        <a class="lay-table-btn" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
        <a class="lay-table-btn" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    {{#  } }}
</script>

js中文章来源地址https://www.toymoban.com/news/detail-491410.html

table.on('tool(data_table)',  function(obj) {
	var data = obj.data; // 行对象数据
	if (obj.event === 'del') {
		
	} else if (obj.event === 'edit') {
		
	} else if (obj.event === 'detail') {
		
	}
});