EasyUI tree菜单添加、删除、保存

来源：互联网发布：java实现推荐算法实例编辑：程序博客网时间：2024/06/06 01:43
效果图：
html代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/easyui/themes/icon.css"><script type="text/javascript" src="<%= request.getContextPath() %>/easyui/jquery.min.js"></script><script type="text/javascript" src="<%= request.getContextPath() %>/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="<%= request.getContextPath() %>/easyui/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="<%= request.getContextPath() %>/style/js/common.js"></script><style type="text/css">.top{padding:50px 0 20px 50px;}#fm table tr{height:25px;font-size:14px;}#dlg-buttons{padding:0 50px;}</style><script type="text/javascript">var subSystemcode="";//初始化页面组件$(function () {   //加载combo数据   var subSystemCombx=$("#subSystem").combobox({    url:'getDictSubSystem',        valueField: 'code',           textField: 'name',       panelHeight:'auto',      editable:false,      onSelect:function(record){     //记录下选择的是哪个子系统      subSystemcode=record.code;      //选中值，加载树      var url = "getChildren?code=" + record.code + "&type=ALL";        $('#tree_menu').tree({  animate: false,  checkbox: false,  lines: true,  url:url,   onLoadSuccess: function (row, data) {  //$(this).tree("collapseAll");//树节点全部闭合  },onClick:function(node){//把当前树的信息填到右侧$('#fm').form('load',node);}});        }   });         });</script><script type="text/javascript">var url = "update.json";//添加子菜单function addSubMenu(){//清空form的信息$('#fm').form('clear');//获取左侧选中的树节点var node = $('#tree_menu').tree('getSelected');            //         if (!node) {            //             $.messager.show({// title: 'Error',// msg: "未选择父节点"// });//             return;//         }        if (!subSystemcode) {                        $.messager.show({title: 'Error',msg: "未选择系统"});            return;        }        //记录左侧的树节点的id        var id=null;        if(node!=null){        id=node.id;        }               //初始化赋值：父ID,父节点名称,编码,所属系统,当前编码，state,        $.post('getChildInit/'+id+'/'+subSystemcode+'.json',function(result){                $('#fm').form('load',result);},'json');              //点保存按钮，执行新增操作        url="save.json";       }//添加同级菜单function addBrotherMenu() {//获取左侧选中的树节点var node = $('#tree_menu').tree('getSelected');                    if (!node) {                        $.messager.show({title: 'Error',msg: "未选择同级节点"});            return;        }        //初始化赋值：父ID,父节点名称,编码,所属系统,当前编码，state,        $.post('getBrotherInit/'+node.id+'.json',function(result){        $('#fm').form('load',result);},'json');             //点保存按钮，执行新增操作        url="save.json";        }//保存菜单function saveMenu(){$('#fm').form('submit',{url: url,onSubmit: function(){return $(this).form('validate');},success: function(data){   var result = JSON.parse(data);if (result.error){$.messager.show({title: 'Error',msg: result.error});} else {$.messager.show({title: 'Info',msg: result.info});//处理保存完毕,添加节点if(url.substring(0,4) =="save") {//$('#tree_menu').tree('reload');//当前选中的节点 var nodeNow = $("#tree_menu").tree('getSelected');//添加子节点if(nodeNow.level<result.auth.level){$("#tree_menu").tree("append",{        parent: nodeNow.target,        data:     [{        "id":result.auth.id,            "text":result.auth.text        }]});$('#tree_menu').tree('reload', nodeNow.target);}//添加同级节点if(nodeNow.level==result.auth.level){var pnode=$("#tree_menu").tree('getParent',nodeNow.target);$("#tree_menu").tree("append",{        parent: pnode.target,        data:     [{        "id":result.auth.id,            "text":result.auth.text        }]});$('#tree_menu').tree('reload', pnode.target);}    } else {//修改完也刷新树var node = $('#tree_menu').tree('getSelected'); if(node) {node.text = result.auth.text;$("#tree_menu").tree("update", node);var pnode=$("#tree_menu").tree('getParent',node.target);$('#tree_menu').tree('reload', pnode.target);}}}//点保存按钮，默认执行修改操作url="update.json";}});}//删除菜单function destroyMenu(){var node = $('#tree_menu').tree('getSelected'); if (node){$.messager.confirm('Confirm','确定删除该菜单?',function(r){if (r){$.post('<%= request.getContextPath() %>/manage/auth/delete/'+node.id+'.json',function(result){if (result.info){$.messager.show({title: 'Success',msg: result.info});//刷新节点//$('#tree_menu').tree('reload');var node = $("#tree_menu").tree("getSelected");$('#tree_menu').tree('remove', node.target);//清空右侧表单数据$('#fm').form('clear');} else {$.messager.show({title: 'Error',msg: result.error});}},'json');}});}else{ $.messager.show({title: 'Error',msg: "未选择要删除的菜单"});}}//查询指定菜单,并转向指定菜单var keyword = null;function searchMenu() {keyword = $('#keyword').val();//tree 转向指定菜单//展开第一层节点$("#tree_menu").tree('collapseAll');    var root = $("#tree_menu").tree("find", "1");    $("#tree_menu").tree("expand", root.target);// var Node = $("#tree_menu").tree("find", 4); //获取当前节点//         $("#tree_menu").tree("expand", Node.target);//         $("#tree_menu").tree("select", Node.target); //定位当前节点                $.post('<%= request.getContextPath() %>/manage/auth/getNodeByName/'+keyword+'/'+subSystemcode,function(result){                        if(result[0].level==2){        var Node = $("#tree_menu").tree("find", result[0].id); //获取当前节点            //$("#tree_menu").tree("expand", Node.target);            $("#tree_menu").tree("select", Node.target); //定位当前节点         }else if(result[0].level==3){        var pNode = $("#tree_menu").tree("find", result[0].pid); //获取当前节点的父节点                $("#tree_menu").tree("expand", pNode.target);        //应该当事件结束之后，在find                var childeNode = $("#tree_menu").tree("find", result[0].id); //获取当前节点                $("#tree_menu").tree("select", childeNode.target); //定位当前节点        }             },'json');}</script><title>Menu管理</title></head><body  class="easyui-layout"><div data-options="region:'west',split:true" style="width: 18%;" ><div class="easyui-panel" data-options="border:false" style="padding:5px;"><div id="tb" style="padding:3px">    <span>菜单:</span>    <input id="keyword" class="easyui-textbox" />    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="searchMenu()"></a></div><div id="comboTree" style="padding:3px">    <span>系统:</span>    <input id="subSystem" class="easyui-combobox" />    <ul id="tree_menu" class="easyui-tree" ></ul></div></div></div><div data-options="region:'center', border:false"><div id="tt" class="easyui-panel" data-options="fit:true,border:false,plain:true"><div class="top"><form id="fm" method="post"><input type="hidden" name="id"><input type="hidden" name="state"><input type="hidden" name="subSystemCode"><input type="hidden" name="level"><table><tr><td><label>父级菜单ID:</label></td><td><input name="pid" class="easyui-textbox" id="pid" readonly="readonly"></td></tr><tr><td><label>父级菜单名称:</label></td><td><input name="pname" class="easyui-textbox" id="pname" readonly="readonly"></td></tr><tr><td><label>编码:</label></td><td><input name="code" class="easyui-textbox" readonly="readonly"></td></tr><tr><td><label>菜单名称:</label></td><td><input name="text" class="easyui-textbox" data-options="required:true"></td></tr><tr><td><label>菜单URL:</label></td><td><input name="menuUrl" class="easyui-textbox"></td></tr><tr><td><label>权限控制URL:</label></td><td><input name="authUrl" class="easyui-textbox"></td></tr><tr><td><label>权限编码:</label></td><td><input name="authCode" class="easyui-textbox"></td></tr><tr><td><label>权限描述:</label></td><td><input name="authDesc" class="easyui-textbox"></td></tr><tr><td><label>菜单序号:</label></td><td><input name="menuOrder" class="easyui-textbox"></td></tr><tr><td><label>权限序号:</label></td><td><input name="authOrder" class="easyui-textbox"></td></tr><tr><td><label>所属系统:</label></td><td><input name="subSystemName" class="easyui-textbox"></td></tr><tr><td><label>是否启用:</label></td><td><select class="easyui-combobox" data-options="editable:false,panelHeight:'auto'" name="enable"><option value="1">启用</option><option value="0">禁用</option></select></td></tr><tr><td><label>备注:</label></td><td><input name="note" class="easyui-textbox" data-options="multiline:true" style="height:60px"></td></tr></table></form></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="addSubMenu()">添加子节点</a><a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="addBrotherMenu()">添加同级节点</a><a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveMenu()">保存</a><a href="#" class="easyui-linkbutton" iconCls="icon-no" onclick="destroyMenu()">删除</a></div></div></div></body></html>
0 1