为dojo普及做贡献-B--增加服务器交互

dojo和java服务器交互,注意，不管跟哪种语言接上去，都不重要，

重要的是

dojo要什么样的数据
服务器要什么样的数据
他们怎么沟通

经常有人问什么extjs和ssh实例什么的，所以才被上这个重要的提示，如果你是跟servlet交互，个人觉得更容易，out.print把数据输出就可以，更简单

首先就是一个model和数据库

Category.java（）

/** * @author <a href="https://www.jb51.cc/tag/fenlei/" target="_blank" class="keywords">分类</a>、模块 * @hibernate.class table="category" */ public class Category { /** * @hibernate.id generator-class="native" */ private int id; /** * @hibernate.property */ private String title; /** * 描述 * * @hibernate.property type="java.lang.String" length="1526" */ private String description; /** * @hibernate.property */ private String url; /** * @hibernate.property */ private String viewUrl; /** * 排序码 * * @hibernate.property */ private int sortingCode; /** * not-found="ignore" 忽略异常 property-ref="depCode" * * @hibernate.many-to-one column="pid" lazy="false" not-found="ignore" */ private Category parent; /** * @hibernate.set inverse="true" lazy="false" order-by="sortingCode" * @hibernate.key column="pid" * @hibernate.one-to-many class="com.flexoa.model.Category" */ private Set<Category> children; public Category() { super(); } public Category(int id,String title,String url,String viewUrl,int sortingCode,Category parent,Set<Category> children) { super(); this.id = id; this.title = title; this.url = url; this.viewUrl = viewUrl; this.sortingCode = sortingCode; this.parent = parent; this.children = children; } public int getSortingCode() { return sortingCode; } public void setSortingCode(int sortingCode) { this.sortingCode = sortingCode; } public String getViewUrl() { return viewUrl; } public void setViewUrl(String viewUrl) { this.viewUrl = viewUrl; } public Category getParent() { return parent; } public void setParent(Category parent) { this.parent = parent; } public Set<Category> getChildren() { return children; } public void setChildren(Set<Category> children) { this.children = children; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } }

Category.hbm.xml

<hibernate-mapping> <class table="category" name="com.flexoa.model.Category"> <id name="id"> <generator class="native"/> </id> <property name="title"/> <property name="description" length="1526" type="java.lang.String"/> <property name="url"/> <property name="viewUrl"/> <property name="sortingCode"/> <many-to-one column="pid" not-found="ignore" lazy="false" name="parent"/> <set inverse="true" order-by="sortingCode" lazy="false" name="children"> <key column="pid"/> <one-to-many class="com.flexoa.model.Category"/> </set> </class> </hibernate-mapping>

数据库脚本：

/*Table structure for table `category` */ DROP TABLE IF EXISTS `category`; CREATE TABLE `category` ( `id` int(11) NOT NULL AUTO_INCREMENT,`title` varchar(255) DEFAULT NULL,`url` varchar(255) DEFAULT NULL,`isFolder` bit(1) DEFAULT NULL,`pid` int(11) DEFAULT NULL,`viewUrl` varchar(255) DEFAULT NULL,`sortingCode` int(11) DEFAULT NULL,PRIMARY KEY (`id`),KEY `FK302BCFED3B107E4` (`pid`),CONSTRAINT `FK302BCFED3B107E4` FOREIGN KEY (`pid`) REFERENCES `category` (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8; /*Data for the table `category` */ insert into `category`(id,title,url,isFolder,pid,viewUrl,sortingCode) values (1,'管理菜单',NULL,'',2010),(2,'景点大全',1,(3,'热门活动','',20100107),(4,'驴客集','AAA',(5,'旅游政务资讯',8,(6,'武汉赛车协会',(7,'大武汉城市圈',(8,'特色专栏',(9,'旅游常识',(10,'各地指南',(11,'旅行社',(12,'旅游线路',(13,'活动分类','classifyDefault.action',3,(14,'活动管理','activityDefault.action',(15,'旅游线路分类',12,(16,'旅游线路管理',(17,'吃喝玩乐',20100107);

其次就是action和struts.xml配置

CategoryAction.java

public class CategoryTreeAction extends ActionSupport { private static final long serialVersionUID = 504<a href="https://www.jb51.cc/tag/301/" target="_blank" class="keywords">301</a>8289424981347L; private Integer parentId; private Integer id; private final String label = "title"; private final String identifier = "id"; private String description; private String title; private String url; private String operation; @SuppressWarnings("unchecked") private List items; private CategoryManager categoryManager; @Override public String execute() throws Exception { items = categoryManager.findCategorys(parentId,Integer.MAX_VALUE) .getList(); return SUCCESS; } public String addTreeNode() throws Exception { StringBuffer sb = new StringBuffer(); sb.append("/n/n------:"+operation); sb.append("/nparentId:" + parentId); sb.append("/nid:" + id); sb.append("/ntitle:" + title); System.out.println(sb.toString()); return SUCCESS; } public String editTreeNode() throws Exception { System.out.println(buildOut()); return SUCCESS; } public String removeTreeNode() throws Exception { StringBuffer sb = new StringBuffer(); sb.append("/n/n------:"+operation); sb.append("/nid:" + id); sb.append("/ntitle:" + title); System.out.println(sb.toString()); return SUCCESS; } /** * 构建<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>,只是监视提交的操作 * * @return */ public String buildOut() { StringBuffer sb = new StringBuffer(); sb.append("/n/n------:"+operation); sb.append("/nid:" + id); sb.append("/ntitle:" + title); if ("".equals(description)) sb.append("/ndescription" + description); if (url.equals("")) sb.append("/nurl" + url); return sb.toString(); } /***** ################ *****/ @JSON(serialize = false) public Integer getParentId() { return parentId; } @JSON(serialize = false) public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } @JSON(serialize = false) public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } @JSON(serialize = false) public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } @JSON(serialize = false) public String getOperation() { return operation; } public void setOperation(String operation) { this.operation = operation; } public void setCategoryManager(CategoryManager categoryManager) { this.categoryManager = categoryManager; } public void setParentId(Integer parentId) { this.parentId = parentId; } @JSON(serialize = false) public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } @SuppressWarnings("unchecked") public List getItems() { return items; } @SuppressWarnings("unchecked") public void setItems(List items) { this.items = items; } public String getLabel() { return label; } public String getIdentifier() { return identifier; } }

struts.xml

category-struts.xml

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="categoryTreeGroup" extends="json-default" namespace="/management"> <action name="categoryTree" class="categoryTreeBean"> <result type="json"></result> </action>  <action name="editTree" class="categoryTreeBean" method="editTreeNode"> <result type="json"></result> </action>  <action name="addTreeNode" class="categoryTreeBean" method="addTreeNode"> <result type="json"></result> </action>  <action name="removeTreeNode" class="categoryTreeBean" method="removeTreeNode"> <result type="json"></result> </action> </package> </struts>

再就是html页面

<!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>把对保存到服务器---完成-读取、<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>、<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>跟服务器交互|</title> <link> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">@import "../libs/dojo1.4.x/dojo/resources/dojo.css"; @import "../libs/dojo1.4.x/dijit/themes/tundra/tundra.css";</style> <mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js" djConfig="par@R_<a href="https://www.jb51.cc/tag/403/" target="_blank" class="keywords">403</a>_401@nLoad: true,isDebug:true,debugAtAllCosts:true"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { width: 100%; height: 100%; padding: 0px; margin: 0px; } .dijitTreeLabel { cursor: pointer; }</style> </head> <body class="tundra"> <div dojoType="dijit.layout.BorderContainer" style="width: 700px; height: 400px; margin: 0px auto;" 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="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json"> <mce:script type="dojo/connect" event="onNew" args="newItem"></mce:script> </div> <div dojoType="dijit.tree.TreeStoreModel" store="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json" jsId="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Model"></div> <div dojoType="dijit.Tree" id="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>es" model="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Model" query="{parent:null}" style="height: 90%; overflow: auto;"> <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 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> 实现RUD<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a> </h2> <p> 动态载入<a href="https://www.jb51.cc/tag/shujuku/" target="_blank" class="keywords">数据库</a>数据,马上<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>写JSON<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>,实现<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>和<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a> </p> </div> </div> <div dojoType="dijit.Dialog" id="optionsDialog" title="<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>"> <table> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="option2"> Name: </label> </td> <td> <input id="option1" dojoType="dijit.form.Text<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" type="text"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="option2"> URL: </label> </td> <td> <input id="option2" dojoType="dijit.form.Text<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" type="text"> </td> </tr> <tr> <td colspan="2" style="text-align: center;" mce_style="text-align: center;"> <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk"> OK </button> <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel"> Abort </button> </td> </tr> </table> </div> </body> </html>

至此dojo树的读取服务器数据、修改并提交到服务器、删除树、添加并提交到服务器成功完成,

这里要注意

添加的时候 id值如果不对就会失败,随便插入一个id就可以解决，我用的id : lastBoxSelected.id+highestBoxId+0,

这种可以解决添加时候的问题，但带来了修改时候的问题：

修改的时候自己指定的id和服务器（存储到数据库）的id不一样,造成了按ID就无法修改的问题，因为ID是错误的，

再来个笨的办法，就是按标题名称修改,

或都在插入的时候把ID返回，重新插入到store里面

呵呵。完全解决-

最后修改了一下JS：

最终HTML

最终JS

/** * 这里继续继续重构,<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>prompt为Dialog表单 */ // 假的计算器，等待替换 var highest<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id = 1; // For use in Delete and Rename var last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected = null; /* dijit.byId('cDialog').show(); */ function newItem() { } /** * 清除表单为空 */ function clearItemInput() { dijit.byId("cTitle").setValue(""); dijit.byId("cId").setValue(""); dijit.byId("pId").setValue(""); dijit.byId("cUrl").setValue(""); dijit.byId("cDescription").setValue(""); } /* 取表单值-到<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>,这里已经点击了树，所以当前last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected为需要<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>的当前节点 */ function doUpdate() { dijit.byId("cTitle").setValue(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.title); dijit.byId("cId").setValue(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.id); dijit.byId("cUrl").setValue(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.url); dijit.byId("cDescription").setValue(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.description); } function addCategory() { highest<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id++; // 去掉pInfo就只能插入一级 if (!last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected || !<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.isItem(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected)) { // alert('<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>节点!'+!last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected || !<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.isItem(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected)); alert('请选择节点!'); return; } // 使用dijit对话框,先取值，插入<a href="https://www.jb51.cc/tag/shujuku/" target="_blank" class="keywords">数据库</a>然后更新ID,也算是完美<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>,睡觉,; if (newName = prompt("请输入节点<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>")) { var pInfo = last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected ? { parent : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected,attribute : "children" } : null; var parentId = last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.id; var url = dijit.byId("cUrl").getValue(); var description = dijit.byId("cDescription").getValue(); dojo.xhrGet( { url : "editTree.action?id=0&parentId=" + parentId + "&description=" + description + "&url=" + url + "&title=" + newName,handleAs : "json",handle : function(response) { //只有成功后才插入tree node <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.setValue(<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.newItem( { id : response.id,url : "",description : "",parentId : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.id },newName); console.debug(" RESPONSE：" + response.id + " --new Name " + newName); } }); console.debug(" <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>插入到：" + last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.title + " ID:" + last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.id); } } function removeCategory() { if (!last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected || !<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.isItem(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected)) { alert('请选择节点!'); return; } <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.deleteItem(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected); // 提交到服务器 dojo.xhrPost( { url : "removeTreeNode.action",// <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>es参数名是随意起的 content : { title : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.title,id : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.id,description : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.description,url : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.url,operation : "delete" },timeout : 1000,load : function() { console.debug("<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>成功!"); },error : function() { alert('Uh oh. <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>失败.'); } }); } function updateCategory() { if (!last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected || !<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.isItem(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected)) { alert('请选择节点!'); return; } // 技术含量不高的<a href="https://www.jb51.cc/tag/jiejuefangfa/" target="_blank" class="keywords">解决方法</a>，如果使用dijit对话框地更好 if (newName = prompt("请输入节点<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>:")) { <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json.setValue(last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected,newName); } // 提交到服务器 dojo.xhrPost( { url : "editTree.action",content : { id : last<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Selected.id,operation : "update" },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 = <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Json._getNewFileContentString(); dojo.xhrPost( { url : "saveAll.action",// categorys参数名是随意起的,如果是struts2 可以做个list类型转换 content : { categorys : newFileContentString },load : function() { console.debug("all <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>es saved"); },error : function() { alert('Uh oh. The <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>es weren/'t saved.'); } }); } // alert(dojo.version);

下一步增加树(tree)拖放 操作，下下一步增加tree(树)右键菜单 功能

原文链接：/dojo/291820.html