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: '',
minWidth: 40,
},
{field : 'id', title : '照片', align : 'center', minWidth: '80',
templet: function (d) {
var src = ctxPath+d.img+"?v="+Math.random();
return '![]()
+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){ // 表格加载完毕回调
}
});
其中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();
});
以上即可！
下面是其他相关的使用
监听行复选框点击（如果没有重新复选框，全选也是可以触发的[原有的]）
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"></i>新增</a>
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-event="edit"><i class="layui-icon"></i>修改</a>
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" lay-event="delete"><i class="layui-icon"></i>删除</a>
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-event="search"><i class="layui-icon"></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"></i>查看</a>
{{# if(d.powerCount <= 0){ }}
<a class="lay-table-btn" lay-event="edit"><i class="layui-icon"></i>修改</a>
<a class="lay-table-btn" lay-event="del"><i class="layui-icon"></i>删除</a>
{{# } }}
script>
js中
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') {
}
});