<span><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="https://www.jb51.net/<%=basePath%>"> <title>tree的使用</title> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.2.6/themes/default/easyui.css"> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.2.6/themes/icon.css"> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> var flag; $(function(){ $("#t1").tree({ url:"menuServlet?method=getMenu", animate:true,//展开和折叠菜单时会伴随着动画 dnd:true,//启动菜单项的拖拽功能 //checkbox:true,//菜单项前面是否显示复选框 /* point的取值可能为： append：源节点作为目标节点的子节点 top：源节点和目标节点使用相同的父节点，并且源节点在目标节点的上面 bottom：源节点会产生在目标节点的下面，并且和目标节点是兄弟关系，并且源节点在目标节点的下面 */ onDrop:function(target, source, point){//当拖拽节点松手时触发 //获取目标节点对象 var tar=$("#t1").tree("getNode",target); $.ajax({ type:"post", url:"menuServlet?method=changeMenu", data:{ targetId:tar.id, sourceId:source.id, point:point }, dataType:"json", cache:false, success:function(result){ $.messager.show({ title:"提示信息", msg:"操作成功" }); } }); }, onContextMenu: function(e,node){ //禁止浏览器的右键菜单 e.preventDefault(); $(this).tree('select', node.target); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } }); $("#savebtn").click(function(){ if(flag=="add") { //1.获取所选中的节点 var parent=$("#t1").tree("getSelected"); $("#t1").tree("append",{ parent:parent.target, data:[{ text:$("#dialogMenu").find("input[name=name]").val(), attributes:{url:$("#dialogMenu").find("input[name=url]").val()} }] }); //后台更新 $.ajax({ type:"post", url:"menuServlet?method=addMenu", cache:false, data:{ parentId:parent.id, name:$("#dialogMenu").find("input[name=name]").val(), url:$("#dialogMenu").find("input[name=url]").val() }, dataType:"json", success:function(result){ //重新加载tree $("#t1").tree("reload",parent.target); $.messager.show({ title:"提示信息", msg:"操作成功" }); } }); }else{ $.ajax({ type:"post", url:"menuServlet?method=updateMenu", cache:false, data:{ id:$("#dialogMenu").find("input[name=id]").val(), name:$("#dialogMenu").find("input[name=name]").val(), url:$("#dialogMenu").find("input[name=url]").val() }, dataType:"json", success:function(result){ //重新加载tree,刷新所选中的节点的父节点 var node=$("#t1").tree("getSelected"); var parentNode=$("#t1").tree("getParent",node.target); $("#t1").tree("reload",parentNode.target); $.messager.show({ title:"提示信息", msg:"操作成功" }); } }); } //关闭dialog $("#dialog").dialog("close"); }); $("#cancelbtn").click(function(){ $("#dialog").dialog("close"); }); }); function append(){ flag="add"; $("#dialogMenu").form("clear"); $("#dialog").dialog("open"); } function removes(){ //前台更新 //选中的节点 var selecteNode=$("#t1").tree("getSelected"); $("#t1").tree("remove",selecteNode.target); //后台更新 $.post("menuServlet?method=deleteMenu",{id:selecteNode.id},function(result){ $.messager.show({ title:"提示信息", msg:"操作成功" }); }); } function editor(){ flag="edit"; //清空表单，把选中的节点填充到该dialog中,包括:id,name,url $("#dialogMenu").form("clear"); //选中的节点 var selecteNode=$("#t1").tree("getSelected"); //填充数据 $("#dialogMenu").form("load",{ id:selecteNode.id, name:selecteNode.text, url:selecteNode.attributes.url }); //打开dialog $("#dialog").dialog("open"); } </script> </head> <body> <div> <div>Append</div> <div>Editor</div> <div>Remove</div> </div> <ul></ul> <div title="设置权限" closed=true modal=true> <form method="post"> <input type="hidden"/> <table> <tr> <td>名称:</td> <td><input type="text"/></td> </tr> <tr> <td>url:</td> <td><input type="text"/></td> </tr> <tr> <td colspan="2"> <input type="button" value="保存"/> <input type="button" value="取消"/> </td> </tr> </table> </form> </div> </body> </html> </span>
您可能感兴趣的文章: