layui做树形表格，checkbox可勾选添加删除，对指定的td可编
辑
前⾔
新的项⽬需求是要做⼀个菜单权限的界⾯--弹框界⾯，界⾯⾥⾯是树形表格，然后表格要有checkbox去控制菜单的添加、删除。可修改菜单名字。百度查了⼀下，layui有拓展的组件treetable，要下载js。但是我下载的treetable.js源码不是很理解，表格⾥⾯的checkbox实现勾选就添加，反之就删除这个事件不知道怎么处理，只好⾃⼰写⼀个了。有些粗糙，当做⼀个笔记好了。
放代码
html
<div class="layui-field-box layui-form">
<table class="layui-table admin-table" id="demoTable">
<thead>
<tr>
<th></th>
<th colspan="2">菜单名称</th>
<th>上级菜单</th>
<th>菜单别名</th>
</tr>
</thead>
<tbody id="content" lay-filter="menuTable"></tbody>
</table>
</div>
js
<script>
layui.use(['form', 'layer', 'table', 'laypage'], function () {
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
var table = layui.table;
var table = layui.table;
// 这个是点击弹框时，带过来的参数
var Pid = WF.GetRequest().Pid;
function getList() {
var info = {
"pageSize": 0,
"pageNumber": 1,
"prjId": Pid,
"pMenuId": '',
"searchValue": '',
};
/
/ WF.JSysMenuQuery我们后台的接⼝（⾃⼰封装的写法）
var html = '';
if (res.status == 0) {
layer.msg(res.msg);
} else if (res.status == 1) {
if (res.RecordCount > 0) {
var arr = [];
//对后台返回的数据进⾏处理（后台返回的数据是⼀条⼀条的，没有做树形的数据返回）
for (var i = 0; i < res.RecordCount; i++) {
var result = res.ResInfo[i];
if (result.PMenuID == null) { //判断是不是⽗级菜单
result.Remark = (result.Remark == null) ? "" : result.Remark;
result.PTitle = (result.PTitle == null) ? "" : result.PTitle;
result.PrjTitle = (result.PrjTitle == null) ? "" : result.PrjTitle;
result.data = []
arr.push(result);
} else {
for (var j = 0; j < arr.length; j++) {
var rs = arr[j];
if (rs.MenuID == result.PMenuID) { //⼦级菜单
result.Remark = (result.Remark == null) ? "" : result.Remark;
result.PTitle = (result.PTitle == null) ? "" : result.PTitle;
result.PrjTitle = (result.PrjTitle == null) ? "" : result.PrjTitle;
rs.data.push(result)
}
}
}
}
//树形表格的构建
for (var i = 0; i < arr.length; i++) {
html += '<tr class="trID_' + arr[i].MenuID + '">';
html += '<input type="hidden" id="parentTitle_' + arr[i].MenuID + '" value="' + arr[i].Title + '" />';
if (arr[i].IsContain == true) {
html += '<td width="20px"><input type="checkbox" lay-skin="primary" lay-filter="ParentCheckbox" checked="checked"></td>';
} else {
html += '<td width="20px"><input type="checkbox" lay-skin="primary" lay-filter="ParentCheckbox"></td>';
}
html += '<td id="Title" data-type="' + i + '" colspan="2">' + arr[i].Title + '</td>';
html += '<td>' + arr[i].PTitle + '</td>';
html += '<td id="PrjTitle" ><span >' + arr[i].IsContain + '</span><input type="hidden" value="' + arr[i].MenuID + '"        html += '</tr>';
for (var j = 0; j < arr[i].data.length; j++) {
html += '<tr class="trsub_' + i + 'trID_' + arr[i].data[j].MenuID + '">';
html += '<input type="hidden" id="childTitle_' + arr[i].data[j].MenuID + '"  value="' + arr[i].data[j].Title + '" />';
html += '<td width="20px"><img src="../../images/icon_1.png"/></td>';
if(arr[i].data[j].IsContain == true){
html +='<td width="20px"><input type="checkbox" lay-filter="SubCheckbox" lay-skin="primary" checked="checked" data-id="' + arr[i].data[j].MenuID + '"></td          }else{
html +='<td width="20px"><input type="checkbox" lay-filter="SubCheckbox" lay-skin="primary" data-id="' + arr[i].data[j].MenuID + '"></td>';
}
html += '<td class="RightName">' + arr[i].data[j].Title + '</td>';
html += '<td>' + arr[i].data[j].PTitle + '</td>';
html += '<td id="PrjTitle" ><span >' + arr[i].data[j].IsContain + '</span><input type="hidden" value="' + arr[i].data[
html += '<td id="PrjTitle" ><span >' + arr[i].data[j].IsContain + '</span><input type="hidden" value="' + arr          html += '</tr>';
}
}
$("#content").html(html);
layui下载
}
}
})
}
getList();
//监听⽗checkbox
<('checkbox(ParentCheckbox)', function (data) {
var index = data.elem.Attribute("data-type");
var className = data.elem.Attribute("class");
var ParentRid = className.split("trID_")[1];
let parentTitle = "parentTitle_" + ParentRid
let PText = ElementById(parentTitle).value
if ($(this).is(':checked')) {
var info = {
"PrjID": Pid,
"MenuID": ParentRid,
"RefID": '',
"Title": PText,
}
WF.JPrjMenuAdd(info, function (res) {
if (res.status == 0) {
layer.msg(res.msg)
} else if (res.status == 1) {
layer.msg("添加成功");
}
})
} else {
WF.JPrjMenuDelete(ParentRid, Pid, function (res) {
if (res.status == 0) {
layer.msg(res.msg)
} else if (res.status == 1) {
layer.msg("删除成功");
}
})
}
});
<('checkbox(SubCheckbox)', function (data) {
var Rid = Attribute("data-id");
var childId = "childTitle_" + Rid
var childTitle = ElementById(childId).value
if ($(this).is(':checked')) {
var info = {
"PrjID": Pid,
"MenuID": Rid,
"RefID": '',
"Title": childTitle,
}
api.JPrjMenuAdd(info, function (res) {
if (res.status == 0) {
layer.msg(res.msg)
} else if (res.status == 1) {
layer.msg("添加成功");
}
})
} else {
api.JPrjMenuDelete(Rid, Pid, function (res) {
if (res.status == 0) {
layer.msg(res.msg)
} else if (res.status == 1) {
} else if (res.status == 1) {
layer.msg("删除成功");
}
})
}
});
// 点击修改菜单别名
$(document).on("click", "#PrjTitle", function () {    // 点击菜单别名的td到⾥⾯的input获取⾥⾯的值    var MenuID = $(this).find('input').val()
var IsContain = $(this).find('span').text()
// IsContain
console.log(IsContain)
if (IsContain == 'true') {
layer.prompt({
formType: 2,
title: '菜单别名',
}, function (value, index) {
layer.close(index);
//这⾥⼀般是发送修改的Ajax请求
var info = {
"PrjID": Pid,
"MenuID": MenuID,
"RefID": '',
"Title": value,
}
api.JPrjMenuUpdate(info, function (res) {
if (res.status == 0) {
layer.msg(res.msg)
} else if (res.status == 1) {
layer.msg("修改成功");
getList();
}
})
});
}
})
//表格的展开收缩
$(document).on("click", "#Title", function () {})
})
</script>
后台返回的数据格式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。