|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>菜单信息管理</title>
|
|
|
<meta name="renderer" content="webkit">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<meta name="viewport"
|
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
|
<link rel="stylesheet" href="../../static/css/font.css">
|
|
|
<link rel="stylesheet" href="../../static/css/weadmin.css">
|
|
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
|
<link rel="stylesheet" href="../../lib/tabletree/css/jquery.treetable.css">
|
|
|
<link rel="stylesheet" href="../../lib/tabletree/css/screen.css">
|
|
|
<link rel="stylesheet" href="../../lib/tabletree/css/jquery.treetable.theme.default.css">
|
|
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
<style>
|
|
|
table.treetable thead tr th {
|
|
|
border: 1px solid #e6e6e6 !important;
|
|
|
}
|
|
|
|
|
|
|
|
|
#example-basic thead tr {
|
|
|
background-color: #f2f2f2 !important;
|
|
|
font-size: 14px !important;
|
|
|
color: #666 !important;
|
|
|
height: 28px !important;
|
|
|
line-height: 28px !important;
|
|
|
border: 1px solid #e6e6e6 !important;
|
|
|
}
|
|
|
|
|
|
#example-basic tbody tr {
|
|
|
background-color: #fff !important;
|
|
|
font-size: 14px !important;
|
|
|
color: #666 !important;
|
|
|
height: 33px !important;
|
|
|
line-height: 33px !important;
|
|
|
border: 1px solid #e6e6e6 !important;
|
|
|
}
|
|
|
|
|
|
#example-basic tbody tr td {
|
|
|
border-right: 1px solid #e6e6e6 !important;
|
|
|
}
|
|
|
|
|
|
#example-basic tr td:nth-child(1) {
|
|
|
width: 30%;
|
|
|
}
|
|
|
|
|
|
#example-basic tr td:nth-child(2) {
|
|
|
width: 15%;
|
|
|
}
|
|
|
|
|
|
#example-basic tr td:nth-child(3) {
|
|
|
width:5%;
|
|
|
}
|
|
|
|
|
|
#example-basic tr td:nth-child(4) {
|
|
|
width:20%;
|
|
|
}
|
|
|
#example-basic tr td:nth-child(5) {
|
|
|
width: 30%;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="weadmin-nav">
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">首页</a>
|
|
|
<a href="">基础管理</a>
|
|
|
<a>
|
|
|
<cite>菜单维护</cite></a>
|
|
|
</span>
|
|
|
<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
|
|
|
href="javascript:location.replace(location.href);" title="刷新">
|
|
|
<i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i></a>
|
|
|
</div>
|
|
|
<!-- 表头 -->
|
|
|
<div style="padding:20px 20px 0 20px">
|
|
|
<table id="example-basic">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>名称</th>
|
|
|
<th>url地址</th>
|
|
|
<th>排序号</th>
|
|
|
<th>描述信息</th>
|
|
|
<th>操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="tb1">
|
|
|
<tr data-node-id="1" data-tt-branch="true">
|
|
|
<td><span class='folder'></span>菜单</td>
|
|
|
<td>#</td>
|
|
|
<td>1</td>
|
|
|
<td>未填写</td>
|
|
|
<td>
|
|
|
<a class="layui-btn layui-btn-xs addBtn">添加</a><a class="layui-btn layui-btn-xs editBtn">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger delBtn">删除</a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
|
|
|
<script type="text/html" id="test1">
|
|
|
{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
|
|
|
<tr data-node-id={{d.data[i].menu_id}} data-parent-id={{d.data[i].parent_id}} data-level={{d.data[i].level_id}} data-node-name={{d.data[i].menu_name}} data-tt-branch={{d.data[i].is_leaf}}>
|
|
|
<td>
|
|
|
{{# if(d.data[i].is_leaf){ }}
|
|
|
<span class="folder"></span>{{d.data[i].menu_name}}
|
|
|
{{# } else { }}
|
|
|
<span class="file"></span>{{d.data[i].menu_name}}
|
|
|
{{# } }}
|
|
|
</td>
|
|
|
<td>{{d.data[i].url}}</td>
|
|
|
<td>{{d.data[i].sort_id}}</td>
|
|
|
<td>{{d.data[i].memo}}</td>
|
|
|
<td>
|
|
|
<a class="layui-btn layui-btn-xs addBtn">添加</a>
|
|
|
<a class="layui-btn layui-btn-xs editBtn">编辑</a>
|
|
|
<a class="layui-btn layui-btn-xs layui-btn-danger delBtn">删除</a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
{{# } }}
|
|
|
|
|
|
</script>
|
|
|
</div>
|
|
|
<script src="../../lib/layui/layui.js"></script>
|
|
|
<script src="../../lib/jquery-3.6.0.min.js"></script>
|
|
|
<script src="../../lib/tabletree/jquery.treetable.js"></script>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
layui.extend({
|
|
|
admin: '{/}../../static/js/admin'
|
|
|
});
|
|
|
|
|
|
layui.use(['jquery', 'admin', 'layer','laytpl'], function () {
|
|
|
var $ = layui.jquery,
|
|
|
admin = layui.admin,
|
|
|
layer = layui.layer,
|
|
|
laytpl=layui.laytpl;
|
|
|
|
|
|
|
|
|
function loadHtml(id) {
|
|
|
var list=selectChildAsync(id);
|
|
|
console.log(list);
|
|
|
var str = '';
|
|
|
$.each(list, function (i, item) {
|
|
|
str += '<tr data-node-id="' + item.menu_id + '" data-parent-id="' + item.parent_id + '" data-level="' + item.level_id + '" data-node-name="' + item.menu_name + '" data-tt-branch="' + (item.is_leaf == 0 ? "false" : "true") + '">' +
|
|
|
'<td>' +
|
|
|
(item.is_leaf > 0 ? '<span class="folder"></span>' : '<span class="file"></span>') +
|
|
|
item.menu_name + '</td>' +
|
|
|
'<td>' + item.url + '</td>' +
|
|
|
'<td>' + item.sort_id + '</td>' +
|
|
|
'<td>' + item.memo + '</td>' +
|
|
|
'<td>' +
|
|
|
'<a href="javascript:void(0);" class="layui-btn layui-btn-xs addBtn" >添加</a>' +
|
|
|
'<a href="javascript:void(0);" class="layui-btn layui-btn-xs editBtn">编辑</a>' +
|
|
|
'<a href="javascript:void(0);" class="layui-btn layui-btn-xs layui-btn-danger delBtn">删除</a>' +
|
|
|
'</td>' +
|
|
|
'</tr>';
|
|
|
})
|
|
|
return str;
|
|
|
}
|
|
|
|
|
|
|
|
|
// parent_id
|
|
|
function selectChildAsync(id){
|
|
|
var list="";
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
async: false,
|
|
|
async:false,
|
|
|
url: '/dsBase/menu/selectChildAsync?parent_id='+id,
|
|
|
dataType: "json",
|
|
|
success: function (data) {
|
|
|
list=data.data;
|
|
|
}
|
|
|
});
|
|
|
return list;
|
|
|
}
|
|
|
// id
|
|
|
function selectSingle(id) {
|
|
|
var list = "";
|
|
|
$.ajax({
|
|
|
type : "GET",
|
|
|
dataType : "json",
|
|
|
url:'/dsBase/menu/selectSingle?menu_id='+id,
|
|
|
async : false,
|
|
|
success : function(data) {
|
|
|
list=data.menu_info[0];
|
|
|
}
|
|
|
});
|
|
|
return list;
|
|
|
}
|
|
|
function loadTr(id) {
|
|
|
var lis=selectSingle(id);
|
|
|
var str = "";
|
|
|
str += '<tr data-node-id="' + lis.menu_id + '" data-parent-id="' + lis.parent_id + '" data-level="' + lis.level_id + '" data-node-name="' + lis.menu_name + '" data-tt-branch="' + (lis.is_leaf == 0 ? "false" : "true") + '">' +
|
|
|
'<td>' +
|
|
|
(lis.is_leaf ? '<span class="folder"></span>' : '<span class="file"></span>') +
|
|
|
lis.menu_name + '</td>' +
|
|
|
'<td>' + lis.url + '</td>' +
|
|
|
'<td>' + lis.sort_id + '</td>' +
|
|
|
'<td>' + lis.memo + '</td>' +
|
|
|
'<td>' +
|
|
|
'<a class="layui-btn layui-btn-xs addBtn" href="javascript:void(0);" >添加</a>' +
|
|
|
'<a href="javascript:void(0);" class="layui-btn layui-btn-xs editBtn" >编辑</a>' +
|
|
|
'<a href="javascript:void(0);" class="layui-btn layui-btn-xs layui-btn-danger delBtn">删除</a>' +
|
|
|
'</td>' +
|
|
|
'</tr>';
|
|
|
return str;
|
|
|
}
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
$("#example-basic").treetable({
|
|
|
nodeIdAttr: "nodeId",
|
|
|
parentIdAttr: "parentId",
|
|
|
stringCollapse: "收起",
|
|
|
stringExpand: "展开",
|
|
|
expandable: true,
|
|
|
clickableNodeNames: true,
|
|
|
onInitialized: function () {
|
|
|
$("#example-basic tr:first a").trigger('click');
|
|
|
$("#example-basic").treetable('expandNode', '1');
|
|
|
},
|
|
|
|
|
|
//展开
|
|
|
onNodeExpand: function () {
|
|
|
var node = this;
|
|
|
//是否已经加载
|
|
|
if (node.children && !node.children.length) {
|
|
|
var html = loadHtml(node.id);
|
|
|
$("#example-basic").treetable("loadBranch", node, html);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}).on("click", ".delBtn", function (e) {
|
|
|
e.preventDefault();
|
|
|
var id = $(this).closest("tr").data("node-id");
|
|
|
var pId = $(this).closest("tr").data("parent-id");
|
|
|
var name = $(this).closest("tr").data("node-name");
|
|
|
var list=selectSingle(id);
|
|
|
var branch = list.is_leaf;
|
|
|
layer.confirm('确定删除' + name + '吗？', {
|
|
|
icon: 7
|
|
|
}, function () {
|
|
|
console.log("branch="+branch)
|
|
|
if(branch>0){
|
|
|
layer.alert('存在子节点，不可以直接删除',{icon:0});
|
|
|
}else{
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
dataTYpe: "json",
|
|
|
data: {
|
|
|
menu_id: id
|
|
|
},
|
|
|
url: "/dsBase/menu/DeleteMenu",
|
|
|
success: function (data) {
|
|
|
if (data.success) {
|
|
|
layer.msg(data.message, {icon: 1, time: 2000, shade: 0.1}, function () {
|
|
|
$("#example-basic").treetable("removeNode", id);
|
|
|
var list=selectSingle(pId);
|
|
|
if (list.is_leaf == 0) {
|
|
|
$("tr[data-node-id='" + pId + "']").find("td .folder").removeClass("folder").addClass("file");
|
|
|
$("tr[data-node-id='" + pId + "']").find(".indenter a").hide();
|
|
|
|
|
|
} else {
|
|
|
$("tr[data-node-id='" + id + "']").find("td .folder").removeClass("file").addClass("folder");
|
|
|
$("tr[data-node-id='" + pId + "']").find(".indenter a").show();
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
layer.alert(data.message, {icon: 0});
|
|
|
}
|
|
|
},
|
|
|
error: function (data) {
|
|
|
layer.alert(data.message, {icon: 0})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}).on("click", ".addBtn", function (e) {
|
|
|
e.preventDefault();
|
|
|
var id = $(this).closest("tr").data("node-id");
|
|
|
var level = $(this).closest("tr").data("level");
|
|
|
operation('添加', './add.html', id, level);
|
|
|
|
|
|
|
|
|
}).on("click", ".editBtn", function (e) {
|
|
|
e.preventDefault();
|
|
|
var id = $(this).closest("tr").data("node-id");
|
|
|
var level = $(this).closest("tr").data("level");
|
|
|
operation('编辑', './edit.html', id, level);
|
|
|
});
|
|
|
|
|
|
})
|
|
|
// 操作：增 改
|
|
|
function operation(title,url,id){
|
|
|
layer.open({
|
|
|
type: 2,
|
|
|
area: ['600px', '600px'],
|
|
|
fix: false, //不固定
|
|
|
maxmin: true,
|
|
|
shadeClose: false,
|
|
|
shade: 0.4,
|
|
|
title: title,
|
|
|
content: url+'?id='+id,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
window.treeReload=function(id){
|
|
|
var lis=selectSingle(id);
|
|
|
var pdl=(lis.level_id-1)*19;
|
|
|
var txt="";
|
|
|
if(lis.is_leaf !==0){
|
|
|
txt="<span class=\"indenter\" style=\"padding-left:"+pdl+"px;\"><a href=\"#\" title=\"展开\"> </a></span><span class=\"folder\"></span>"+lis.menu_name;
|
|
|
}else{
|
|
|
txt="<span class=\"indenter\" style=\"padding-left:"+pdl+"px;\"></span><span class=\"file\"></span>"+lis.menu_name;
|
|
|
|
|
|
}
|
|
|
$("tr[data-node-id='"+id+"']").find("td:eq(0)").html(txt);
|
|
|
$("tr[data-node-id='"+id+"']").find("td:eq(1)").text(lis.url);
|
|
|
$("tr[data-node-id='"+id+"']").find("td:eq(2)").text(lis.sort_id);
|
|
|
$("tr[data-node-id='"+id+"']").find("td:eq(3)").text(lis.memo);
|
|
|
}
|
|
|
// 增加树
|
|
|
window.reloadTree = function (pId, nodeId) {
|
|
|
var node = $("#example-basic").treetable("node", pId);
|
|
|
var html = loadTr(nodeId);
|
|
|
$("#example-basic").treetable("loadBranch", node, html);
|
|
|
$("tr[data-node-id='" + pId + "']").find("td .file").removeClass("file").addClass("folder");
|
|
|
$("tr[data-node-id='" + pId + "']").find(".indenter a").show();
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
