前言
新的项目需求是要做一个菜单权限的界面--弹框界面，界面里面是树形表格，然后表格要有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 Pid = WF.GetRequest().Pid;
function getList() {
var info = {
"pageSize": 0,
"pageNumber": 1,
"prjId": Pid,
"pMenuId": '',
"searchValue": '',
};
// WF.JSysMenuQuery我们后台的接口（自己封装的写法）
api.getMenuList(info, function (res) {
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" style="cursor: pointer;"><span style="display: none;">' + arr[i].IsContain + '</span><input type="hidden" value="' + arr[i].MenuID + '" />' + arr[i].PrjTitle + '</td>';
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" style="cursor: pointer;"><span style="display: none;">' + arr[i].data[j].IsContain + '</span><input type="hidden" value="' + arr[i].data[j].MenuID + '" />' + arr[i].data[j].PrjTitle + '</td>';
html += '</tr>';
}
}
$("#content").html(html);
form.render("checkbox");
}
}
})
}
getList();
//监听父checkbox
form.on('checkbox(ParentCheckbox)', function (data) {
var index = data.elem.parentNode.parentNode.getAttribute("data-type");
var className = data.elem.parentNode.parentNode.getAttribute("class");
var ParentRid = className.split("trID_")[1];
let parentTitle = "parentTitle_" + ParentRid
let PText = document.getElementById(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("删除成功");
}
})
}
});
form.on('checkbox(SubCheckbox)', function (data) {
var Rid = data.elem.getAttribute("data-id");
var childId = "childTitle_" + Rid
var childTitle = document.getElementById(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) {
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>
