前言

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

效果

實(shí)現(xiàn)

執(zhí)行一個(gè)table示例

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

cols 的第一列就是需要重寫的復(fù)選框

table.render({
	elem : '#data_table',
	id : 'data_table',
	url : ctxPath+'sys/user/select',
	title : '數(shù)據(jù)列表',
	height:'full-60', // 可視自適應(yīng)
	//size:"sm",
	limit: 15, // 默認(rèn)頁(yè)數(shù)，非頁(yè)碼
	limits: [10, 15, 20, 40, 30, 50, 60, 70, 80, 90, 100],
	page : true,
	toolbar : "#toolberLeft", // 表頭按鈕
	cols : [[
		// {type : 'checkbox'}, // , fixed : 'left' , // 浮動(dòng)
		{
			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){ // 表格加載完畢回調(diào)
		tempTableList = result.data;
	}
});

其中templet: "#toolCheck"的標(biāo)簽塊

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

監(jiān)聽全選重寫

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

獲取復(fù)選框選中的值，tempTableList當(dāng)前列表返回的數(shù)組

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(",") // 轉(zhuǎn)成逗號(hào)隔開字符串

以上即可！

下面是其他相關(guān)的使用

監(jiān)聽行復(fù)選框點(diǎn)擊（如果沒有重寫復(fù)選框就可以用）

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

});

示例表格中的toolbar : “#toolberLeft”, // 表頭按鈕

標(biāo)簽塊

<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’// 操作

標(biāo)簽塊

<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中文章來源地址http://www.zghlxwxcb.cn/news/detail-491410.html

table.on('tool(data_table)',  function(obj) {
	var data = obj.data; // 行對(duì)象數(shù)據(jù)
	if (obj.event === 'del') {
		
	} else if (obj.event === 'edit') {
		
	} else if (obj.event === 'detail') {
		
	}
});

到了這里，關(guān)于Layui禁止表格部分復(fù)選框，layui禁止表格自帶第一列復(fù)選框，layui禁止表格部分復(fù)選框，layui獲取表格復(fù)選框選中數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！