为dojo普及做贡献-C--ajax操作是完成了，但把添加、修改等按钮改成右键，再把提交表单改酷点

前面：树DOJO AJAX操作是完成了，但把添加、修改等按钮不够酷，而且，提交修改的表单就是一个框(prompt()框)，也太不适用了。

这次把右键增加进去，并且把表单改酷点。

先贴源码:

JSP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dojo树到服务器交互-Cool--全部完成-表单改造完成</title> <link rel="stylesheet" href="css/Tree_Notification_API.css" mce_href="css/Tree_Notification_API.css" type="text/css"></link> <mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js" charset="utf-8"></mce:script> <mce:script type="text/javascript" src="js/My_Tree_Dynamic_Cool_menu.js" mce_src="js/My_Tree_Dynamic_Cool_menu.js"></mce:script> </head> <body class="tundra">  <ul dojoType="dijit.Menu" id="tree_menu" style="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: none; width: 8em;"> <li dojoType="dijit.MenuItem" id="addMenu" iconClass="dijitEditorIcon dijitEditorIconIndent"> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </li> <li dojoType="dijit.MenuSep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor"></li> <li dojoType="dijit.MenuItem" id="editMenu" iconClass="dijitEditorIcon dijitEditorIconWikiword"> 编辑 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </li> <li dojoType="dijit.MenuSep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor"></li> <li dojoType="dijit.MenuItem" id="removeMenu" iconClass="dijitEditorIcon dijitEditorIconDelete"> <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a> <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </li> </ul> <div dojoType="dijit.layout.BorderContainer" class="treeLayout" design="headline" liveSizing="true"> <div dojoType="dijit.layout.ContentPane" region="leading" splitter="true" style="width: 300px"> <div dojoType="dojo.data.ItemFileWriteStore" url="categoryTree.action?parentId=0" jsId="categoryJson"> <mce:script type="dojo/connect" event="onNew" args="newItem"></mce:script> </div> <div dojoType="dijit.tree.TreeStoreModel" store="categoryJson" jsId="treeModel"></div> <div dojoType="dijit.Tree" id="mytree" model="treeModel" dndController="dijit._tree.dndSource" query="{parent:null}" style="height: 90%; overflow: auto;"> <mce:script type="dojo/connect"></mce:script> <mce:script type="dojo/method" event="onClick" args="item"></mce:script> </div> <div> <div dojoType="dijit.form.Button"> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a> <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> <a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a> <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> </div> </div> <div dojoType="dijit.layout.ContentPane" region="center"> <h2> 实现CRUD<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>,实现右键<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>编辑,实现拖放，但没有执行相应的<a href="https://www.jb51.cc/tag/shujuku/" target="_blank" class="keywords">数据库</a>操作,最后，完美<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a> </h2> </div> </div> <div dojoType="dijit.Dialog" id="cDialog" title="编辑<a href="https://www.jb51.cc/tag/fenlei/" target="_blank" class="keywords">分类</a>信息" class="myDialog"> <table> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 目录<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>： </label> </td> <td> <input id="cTitle" dojoType="dijit.form.ValidationText<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" size="36" maxlength="36" <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>="true" promptMessage="请输入<a href="https://www.jb51.cc/tag/fenlei/" target="_blank" class="keywords">分类</a><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>." invalidMessage="<a href="https://www.jb51.cc/tag/fenlei/" target="_blank" class="keywords">分类</a><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>必须填写!" trim="true" style="width: 36em;"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cUrl"> 管理地址： </label> </td> <td> <input id="cUrl" dojoType="dijit.form.ValidationText<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" size="36" maxlength="136" style="width: 36em;"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cDescription"> 目录说明： </label> </td> <td>  <input id="cDescription" dojoType="dijit.form.ValidationText<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" size="36" maxlength="136" style="width: 36em;">

javascript :

js/My_Tree_Dynamic_Cool_menu.js

/** * dojo树到服务器交互-Cool--全部完成-表单改造完成开始改按钮为为右键<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a> 2010-02-10 d㊣Guang QQ:二一三零二七九六 * 二一三零二七九六@OO.com */ dojo.require("dojo.parser"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); // dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dijit.Tree"); dojo.require("dijit.Editor"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.require("dijit.form.Text<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"); dojo.require("dijit.form.ValidationText<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"); dojo.require("dijit._tree.dndSource"); dojo.require("dijit.Menu"); // For use in Delete and Rename var lastSelected = null; /* 是<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>还是<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a> */ var state = ""; dojo.addOnLoad(function() { // 解析dojo dojo.parser.parse(); clearItem<a href="https://www.jb51.cc/tag/input/" target="_blank" class="keywords">input()</a>; //wire up the checkItemAcceptance handler... dijit.byId("mytree").checkItemAcceptance = function(target,source) { //convert the target (DOM node) to a tree node and //then get the item out of it var item = dijit.getEnclosingWidget(target).item; //do not allow dropping onto the top (fabricated) level and //do not allow dropping onto items,only categories return (item.id != "root" && item.type == "category"); }; }) /** * 清除表单为空 */ function clearItem<a href="https://www.jb51.cc/tag/input/" target="_blank" class="keywords">input()</a> { dijit.byId('cTitle').setValue(""); dijit.byId('cId').setValue(""); dijit.byId('cUrl').setValue(""); dijit.byId('cDescription').setValue(""); } function addCategory() { // 检查节点是否选择 if (!lastSelected || !categoryJson.isItem(lastSelected)) { // alert('<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>节点!'+!lastSelected || !categoryJson.isItem(lastSelected)); alert('请选择节点!'); return; } // 取上级节点 var pInfo = lastSelected ? { parent : lastSelected,attribute : "children" } : null; var parentId = lastSelected.id; var cTitle = dijit.byId('cTitle').getValue(""); // <a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>的时候有用,此处没用var cId = dijit.byId('cId').getValue(""); var cUrl = dijit.byId('cUrl').getValue(""); var cDescription = dijit.byId('cDescription').getValue(""); dojo.xhrGet( { encoding : 'UTF-8',url : "editTree.action?id=0&parentId=" + parentId + "&description=" + cDescription + "&url=" + cUrl + "&title=" + cTitle,handleAs : "json",handle : function(response) { // 只有成功后才插入tree node categoryJson.setValue(categoryJson.newItem( { id : response.id,title : cTitle,url : cUrl,description : cDescription,parentId : lastSelected.id },pInfo),"title",newName); // alert(" RESPONSE：" + response.id + " --new Name " + cTitle); console.debug(" RESPONSE：" + response.id + " --new Name " + cTitle); } }); console.debug(" <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>插入到：" + lastSelected.title + " ID:" + lastSelected.id); } function removeCategory() { if (!lastSelected || !categoryJson.isItem(lastSelected)) { alert('请选择节点!'); return; } categoryJson.deleteItem(lastSelected); // 提交到服务器 dojo.xhrPost( { url : "removeTreeNode.action",// myTree参数名是随意起的 content : { title : lastSelected.title,id : lastSelected.id },timeout : 1000,load : function() { console.debug("<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>成功!"); },error : function(resource) { alert('Uh oh. <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>失败.' + resource + resource.error); } }); } /* 取表单值-到<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>,这里已经点击了树，所以当前lastSelected为需要<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>的当前节点 */ function doUpdate() { // 检查节点是否选择 if (!lastSelected || !categoryJson.isItem(lastSelected)) { // alert('<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>节点!'+!lastSelected || !categoryJson.isItem(lastSelected)); alert('请选择节点!'); return; } dijit.byId('cTitle').setValue(lastSelected.title); dijit.byId('cId').attr("type","hidden"); dijit.byId('cId').setValue(lastSelected.id); dijit.byId('cUrl').setValue(lastSelected.url); dijit.byId('cDescription').setValue(lastSelected.description); } function updateCategory() { if (!lastSelected || !categoryJson.isItem(lastSelected)) { alert('请选择节点!'); return; } var cTitle = dijit.byId('cTitle').getValue(); var cId = dijit.byId('cId').getValue(); var cUrl = dijit.byId('cUrl').getValue(); var cDescription = dijit.byId('cDescription').getValue(); // 使用dijit对话框地更好 categoryJson.setValue(lastSelected,cTitle); // categoryJson.setValue(lastSelected,"id",cId); categoryJson.setValue(lastSelected,"url",cUrl); categoryJson.setValue(lastSelected,"description",cDescription); // 提交到服务器 dojo.xhrPost( { url : "editTree.action",// myTree参数名是随意起的 content : { id : cId,url : cUrl },load : function() { console.debug("<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>成功!"); },error : function() { alert('Uh oh. <a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>/'t 出错啦.'); } }); } saveAll = function() { // 把 JavaScript 转成 JSON. 类似 dojo.objectToJSON,但是考虑了dojo.data类型映射 var newFileContentString = categoryJson._getNewFileContentString(); dojo.xhrPost( { url : "datasources/rma_myTree.json",// myTree参数名是随意起的 content : { myTree : newFileContentString },load : function() { console.debug("all myTree saved"); },error : function() { alert('Uh oh. The myTree weren/'t saved.'); } }); } // alert(dojo.version); // alert(dojo.version);

我很陶醉，全部完成:

1:拖动

2:右键

3:表单改造

拖动提交到库其实很简单，无非就是改一下现在的父级ID，就不再做下去了，，，

要COOL就酷到底,马上开始写最新版本的dojo(1.4X) grid

写完了把部件整合到一起，来个综合应用;

下一篇：要COOL就酷到底

为dojo普及做贡献-C--ajax操作是完成了，但把添加、修改等按钮改成右键，再把提交表单改酷点

先贴源码:

JSP:

javascript :

相关文章