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

本文链接：https://blog.csdn.net/flash8627/article/details/5305433

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

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

先贴源码:

JSP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta 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="display: none; width: 8em;"> <li dojoType="dijit.MenuItem" id="addMenu" iconClass="dijitEditorIcon dijitEditorIconIndent"> 添加 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </li> <li dojoType="dijit.MenuSeparator"></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.MenuSeparator"></li> <li dojoType="dijit.MenuItem" id="removeMenu" iconClass="dijitEditorIcon dijitEditorIconDelete"> 删除 <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"> 添加 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 删除 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 修改 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> </div> </div> <div dojoType="dijit.layout.ContentPane" region="center"> <h2> 实现CRUD功能,实现右键菜单编辑,实现拖放，但没有执行相应的数据库操作,最后，完美解决 </h2> </div> </div> <div dojoType="dijit.Dialog" id="cDialog" title="编辑分类信息" class="myDialog"> <table> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> 目录名称： </label> </td> <td> <input id="cTitle" dojoType="dijit.form.ValidationTextBox" size="36" maxlength="36" required="true" promptMessage="请输入分类名称." invalidMessage="分类名称必须填写!" 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.ValidationTextBox" 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.ValidationTextBox" size="36" maxlength="136" style="width: 36em;">

javascript :

js/My_Tree_Dynamic_Cool_menu.js

/** * dojo树到服务器交互-Cool--全部完成-表单改造完成开始改按钮为为右键菜单 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.TextBox"); dojo.require("dijit.form.ValidationTextBox"); dojo.require("dijit._tree.dndSource"); dojo.require("dijit.Menu"); // For use in Delete and Rename var lastSelected = null; /* 是添加还是修改 */ var state = ""; dojo.addOnLoad(function() { // 解析dojo dojo.parser.parse(); clearItemInput(); //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 clearItemInput() { dijit.byId('cTitle').setValue(""); dijit.byId('cId').setValue(""); dijit.byId('cUrl').setValue(""); dijit.byId('cDescription').setValue(""); } function addCategory() { // 检查节点是否选择 if (!lastSelected || !categoryJson.isItem(lastSelected)) { // alert('添加节点!'+!lastSelected || !categoryJson.isItem(lastSelected)); alert('请选择节点!'); return; } // 取上级节点 var pInfo = lastSelected ? { parent : lastSelected, attribute : "children" } : null; var parentId = lastSelected.id; var cTitle = dijit.byId('cTitle').getValue(""); // 修改的时候有用,此处没用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(" 添加插入到：" + 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("删除成功!"); }, error : function(resource) { alert('Uh oh. 删除失败.' + resource + resource.error); } }); } /* 取表单值-到修改,这里已经点击了树，所以当前lastSelected为需要修改的当前节点 */ function doUpdate() { // 检查节点是否选择 if (!lastSelected || !categoryJson.isItem(lastSelected)) { // alert('添加节点!'+!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, "title", 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, title : cTitle, description : cDescription, url : cUrl }, timeout : 1000, load : function() { console.debug("修改成功!"); }, error : function() { alert('Uh oh. 修改/'t 出错啦.'); } }); } saveAll = function() { // 把 JavaScript 转成 JSON. 类似 dojo.objectToJSON, 但是考虑了dojo.data类型映射 var newFileContentString = categoryJson._getNewFileContentString(); dojo.xhrPost( { url : "datasources/rma_myTree.json", // myTree参数名是随意起的 content : { myTree : newFileContentString }, timeout : 1000, 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就酷到底