树形菜单easyUI treegrid实现

最新推荐文章于 2020-02-02 12:52:23 发布

程序员阿歪

最新推荐文章于 2020-02-02 12:52:23 发布

阅读量483

点赞数

分类专栏：前端 java 文章标签： easyUI treegrid javaWeb

本文链接：https://blog.csdn.net/fallInLoveIT/article/details/80852803

版权

java 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

//menu.jsp 代码

<!DOCTYPE html>

<html>
<head>
<title>SMART - 菜单管理</title>
<jsp:include page="../include/head.jsp" />
</head>
<body>
   <div class="wrapper">
      <!-- 导航区 -->
      <jsp:include page="../include/topnav.jsp" />
      <!-- 左侧菜单区 -->
      <jsp:include page="../include/menu.jsp">
      <jsp:param value="" name="selectedItem" />
      </jsp:include>
      <!-- 右侧边栏 -->
      <jsp:include page="../include/right.jsp" />
      <!-- Main section-->
      <section>
         <!-- Page content-->
         <div class="content-wrapper">
            <div class="content-heading">菜单列表</div>
            <div class="panel panel-default">
<div class="panel-body">
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="btn btn-primary" onclick="edit()">编辑</a>
<a href="javascript:void(0)" class="btn btn-primary" onclick="save()"">增加子菜单</a>
<a href="javascript:void(0)" class="btn btn-primary" onclick="del()">删除</a>
</div>
<ul id="tg" style="width:auto;height:auto" class="table-responsive"></ul>
</div>
</div>
         </div>
      </section>
      <jsp:include page="../include/footer.jsp" />
   </div>
   <!-- modal s-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog" style="margin-top:160px;">
    <div class="modal-content">
      <!-- 模态框主体 -->
      <div class="modal-body" id="app">
      <form role="form" action="admin/menu/edit2" method="post" class="form-horizontal" id="menuForm">
<c:if test="${obj!=null && obj.id ne null}">
<input type="hidden" name="id" value="${obj.id}" id="diologId"/>
</c:if>
<c:if test="${obj!=null && obj.parent ne null}">
<div class="form-group">
<label for="title" class="col-sm-5 control-label">父菜单</label>
<div class="col-sm-7">
<input type="text" class="form-control" disabled value="${obj.parent.name}" />
<input type="hidden" name="parentId" value="${obj.parentId}" />
<input type="hidden" name="level" value="${obj.parent.level + 1}" />
</div>
</div>
</c:if>
<div class="form-group">
<label for="title" class="col-sm-5 control-label">名称(即菜单文字)</label>
<div class="col-sm-7">
<c:if test="${obj!=null && obj.id ne null}">
<!-- 做父节点 -->
<input type="hidden" name="parentId" value="${obj.id}" id="parentId"/>
</c:if>
<input type="text" class="form-control" id="name" name="name" value="${obj.name}" />
<input type="hidden" class="form-control" id="id" name="id" value="${obj.id}" />
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-5 control-label">URL(若无跳转则填#)</label>
<div class="col-sm-7">
<input type="text" class="form-control" value="${obj.url}" name="url" id="url"/ style="margin-bottom:-15px;"><br/>
  <div class="">
    <div class="input-group">
    <%-- <input type="hidden" class="form-control" id="url" name="url" value="${obj.url}" /> --%>
      <input type="text" class="form-control" placeholder="查找资讯" id="searchTitle">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="searchBtn" v-on:click="search">查找</button>
      </span>
      <span class="input-group-btn">
      <select class="btn btn-default"  id="infoSelectBtn">
      <option value="#">查找选择↓</option>
      <option v-for="info in aticList"  :value="'info/'+info.id+'.html'" v-on:click="slectInfo('info/'+info.id+'.html',info.title)">{{info.title}}</option>
      </select>
      </span>
    </div>
  </div>
</div>
</div> 
<div class="form-group">
<label for="attr1" class="col-sm-5 control-label">附加属性1(仅为一级菜单设计)</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="attr1" name="attr1" value="${obj.attr1}" />
</div>
</div>
<div class="form-group">
<label for="attr2" class="col-sm-5 control-label">附加属性2(仅为二级菜单设计)</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="attr2" name="attr2" value="${obj.attr2}" />
</div>
</div>
<div class="form-group">
<label for="sort" class="col-sm-5 control-label">排序</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="sort" name="sort" value="<c:if test="${obj==null||obj.sort==null}">0</c:if><c:if test="${obj.sort!=null}">${obj.sort}</c:if>" />
</div>
</div>

<div class="form-group" >
<div class="col-sm-5"></div>
<div class="col-sm-7">
<button type="submit" class="btn btn-primary">提交</button>
<a href="admin/menu/list?parentId=${obj.parent.id}" class="btn btn-primary">返回列表</a> 
</div>
</div>
</form>
      </div>
   <!-- modal e-->
   <jsp:include page="../include/script.jsp" />
</body>
</html>
<script>
$('#mainMenu li').removeClass('active');
$('#menuMenu').addClass('active');


var tree = {
id : '',
name : '',
url : '',
sort : '',
level : '',
state : '',
checked : '',
attributes : '',
children : ''
}
//此处是把后台传过来的json数据转成easyui规定的格式  
function bl(item) {
var tree = new Object();
tree.id = item.id;
tree.name = item.name;
tree.url = item.url;
tree.sort = item.sort;
tree.level = item.level;
tree.state = 'open';
tree.checked = 'false';
tree.attributes = item.url;
//alert(item);
if (item.children!='undefined' && item.children!=null && item.children.length != 0) {
tree.children = jsonbl(item.children);
} else {
tree.children = [];
}
return tree;
}
function jsonbl(data) {
var easyTree = [];
$.each(data, function(index, item) {
easyTree[index] = bl(item);
});
return easyTree;
}


$('#tg').treegrid({
url : 'menu/initList',
loadFilter : function(data) {
console.log(data);
return data;
},
idField:'id',
    treeField:'name',
    columns:[[
{title:'菜单名',field:'name',width:180},
{title:'ID',field:'id',width:180},
{title:'url',field:'url',width:300},
{title:'排序',field:'sort',width:300},
//{title:'pid',field:'parentId',width:300},
{title:'菜单级别',field:'level',width:300},
    ]]
});
var editingId;
function edit(){
var row = $('#tg').treegrid('getSelected');
if (row){
editingId = row.id
//alert(editingId);
$('#tg').treegrid('beginEdit', editingId);

$.ajax({
url: 'admin/menu/getInfo?id=' + editingId,
method: 'get',
success: function(data){
$("#id").val(editingId);
$("#name").val(data.name);
$("#code").val(data.code);
$("#url").val(data.url);
$("#attr1").val(data.attr1);
$("#attr2").val(data.attr2);
$("#sort").val(data.sort);
}
});
$('#myModal').modal({});
}else{
alert('请先选择一个菜单');
}
}
function save(){
var row = $('#tg').treegrid('getSelected');
if (row){
editingId = row.id
//alert(editingId);
console.log(editingId);
$('#tg').treegrid('beginEdit', editingId);
//改字段传后台,只传递parentId过去
$("#id").attr("name","parentId");
$("#id").attr("id","parentId");
$("#parentId").val(editingId);
$('#myModal').modal({});
}else{
alert('请先选择一个父菜单');
}
}
function cancel(){
if (editingId != undefined){
$('#tg').treegrid('cancelEdit', editingId);
editingId = undefined;
}
}
function del(){
var row = $('#tg').treegrid('getSelected');
if (row){
editingId = row.id
if(!confirm("确定删除？")){
return;
}
$.ajax({
url: 'admin/menu/delete?id=' + editingId,
method: 'get',
success: function(){
console.log('delete menu success!id='+editingId);
window.location.reload();
},
error: function(){
alert('删除失败, 请确保下属子菜单已经全部删除.');
}
})
}else{
alert('请先选择一个菜单');
}
}
var vm = new Vue({
el : '#app',
data : {
aticList:{},
title:null
},
created : function() {

},
methods : {
search:function(){
var that=this;
var title=$("#searchTitle").val();
//alert(name);
$.ajax({
url: 'admin/info/findByName',
method: 'post',
data:{title:title},
success: function(data){
that.aticList=data; 
}
});
},
slectInfo:function(url,title){
var that=this;
//alert(url);
$("#url").val(url);
$("#searchTitle").attr('placeholder',title);
that.title=title;
//alert($("#url").val());
},
},
filters : {
formatDate : function(time) {
            var date = new Date(time);
            return formatDate1(date); 
        },

}
})




$("#infoSelectBtn").change(function(){
console.log("222")
var url=$(this).children('option:selected').val();
$("#url").val(url);
//$("#searchTitle").attr('placeholder',title);
});

$("#submit").click(function(){
alert(111);
var name=$("#name").val();
var sort=$("#sort").val();
var menuForm=$("#menuForm");
if(name==null|| name=="" || name==undefined){
alert("请填写菜单名");
return;
}
if(sort==null|| sort=="" || sort==undefined){
alert("请填写菜单的排序,默认请填写0");
return;
}
menuForm.submit();
});

</script>

//meunController.java

/**
* easyUI 加载菜单列表
* @param parentId
* @param model
* @return
*/
@RequestMapping("menu/initList")
public @ResponseBody List<Menu> getList(Long parentId,Model model){
//得到所有的菜单
List<Menu> allList=menuService.findAll();
List<Menu> resultList = new ArrayList<>();
for (Menu menu : allList) {
if (menu.getLevel()==0) {// 父级菜单开始添加
resultList.add(menu);
}
if (ifChilds(allList, menu.getId())) {// 存在子集
List<Menu> childs = new ArrayList<>();
childs = getChild(menu.getId(), allList);
menu.setChildren(childs);
}
}
Menu parent = null;
if (parentId == null) {
parent = menuService.findOneBy("code", Menu.ROOT_MENU_CODE);
parentId = parent.getId();
} else {
parent = menuService.findOne(parentId);
}
model.addAttribute("parent", parent);
return resultList;
}



/**
* 递归查找子菜单
* @param id 当前菜单id
* @param rootMenu 要查找的列表
* @return childs
*/
private List<Menu> getChild(Long id, List<Menu> rootMenu) {
// 子菜单
List<Menu> childList = new ArrayList<>();
for (Menu menu : rootMenu) {
// 遍历所有节点，将父菜单id与传过来的id比较
if (menu.getParentId() != null) {
if (menu.getParentId().equals(id)) {
childList.add(menu);
}
}
}
// 把子菜单的子菜单再循环一遍
for (Menu menu : childList) {// 子菜单还有子菜单
// 递归
menu.setChildren(getChild(menu.getId(), rootMenu));
} // 递归退出条件
if (childList.size() == 0) {
return null;
}
return childList;
}

/**
* 是否存在直接子节点
* @param list
* @param pId
* @return
*/
private static boolean ifChilds(List<Menu> list, Long pId) {
boolean flag = false;
for (Menu menu : list) {
if (menu.getParentId() != null && menu.getParentId().equals(pId)) {
flag = true;
break;
}
}
return flag;
}

程序员阿歪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树形菜单easyUI treegrid实现

//menu.jsp 代码<!DOCTYPE html><html><head><title>SMART - 菜单管理</title><jsp:include page="../include/head.jsp" /></head><body> <div class="w...
复制链接

扫一扫