dojo tree 最终版,包含前面的所有功能，并进一步重构了代码,这里直接贴代码，不再做解释

来源：互联网发布：aes加密算法原理java 编辑：程序博客网时间：2024/06/06 05:13

代码方向从页面到数据

html
<!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"><title>管理菜单</title><link rel="stylesheet" type="text/css" href="css/management-left.css" mce_href="css/management-left.css" /><mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js"></mce:script><mce:script type="text/javascript" src="js/management.js" mce_src="js/management.js"></mce:script></head><body class="tundra"><div dojoType="dojo.data.ItemFileWriteStore"url="categoryTree.action?parentId=0" jsId="categoryJson"></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="26" maxlength="46" required="true" promptMessage="请输入分类名称."invalidMessage="分类名称必须填写!" trim="true" style="width: 26em;"></td></tr><tr style="display: none;" mce_style="display: none;"><td style="text-align: right;" mce_style="text-align: right;"><label for="cUrl">管理地址：</label></td><td><input id="cUrl" dojoType="dijit.form.ValidationTextBox" size="26"maxlength="136" style="width: 36em;"><input id="cSn" dojoType="dijit.form.ValidationTextBox" size="26"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="26" maxlength="136" style="width: 26em;"></td></tr><tr><td colspan="2" style="text-align: center;" mce_style="text-align: center;"><input id="cId" type="hidden" dojoType="dijit.form.TextBox"></td></tr><tr><td colspan="2" style="text-align: center;" mce_style="text-align: center;"><button dojoType="dijit.form.Button" type="submit"iconClass="mailIconOk" jsId="saveBtn">保存</button><button dojoType="dijit.form.Button" type="submit"iconClass="mailIconCancel">放弃</button></td></tr></table></div><ul dojoType="dijit.Menu" id="progMenu"style="display: none; width: 8em;"><li dojoType="dijit.PopupMenuItem" disabled="true"><span>文本编辑</span><ul dojoType="dijit.Menu" id="submenu2"><li dojoType="dijit.MenuItem" disabled="true">剪切</li><li dojoType="dijit.MenuItem" disabled="true"> 复制</li><li dojoType="dijit.MenuItem" disabled="true">粘贴</li><li dojoType="dijit.MenuSeparator"></li><li dojoType="dijit.PopupMenuItem" disabled="true"><span>Deeper Submenu</span><ul dojoType="dijit.Menu" id="submenu4"><li dojoType="dijit.MenuItem">Sub-sub-menu Item One</li><li dojoType="dijit.MenuItem">Sub-sub-menu Item Two</li></ul></li></ul></li><li dojoType="dijit.MenuSeparator"></li><li dojoType="dijit.MenuItem" jsId="addMenu"iconClass="dijitEditorIcon dijitEditorIconIndent">添加目录</li><li dojoType="dijit.MenuSeparator"></li><li dojoType="dijit.MenuItem" jsId="editMenu"iconClass="dijitEditorIcon dijitEditorIconWikiword">编辑目录</li><li dojoType="dijit.MenuSeparator"></li><li dojoType="dijit.MenuItem" jsId="removeMenu"iconClass="dijitEditorIcon dijitEditorIconDelete">删除目录</li></ul><div dojoType="dijit.layout.AccordionContainer"class="mainLeftContainer"><div dojoType="dijit.layout.ContentPane" title="管理菜单"id="mainContentPane"><div dojoType="dijit.tree.TreeStoreModel" store="categoryJson"jsId="treeModel"></div><div dojoType="dijit.Tree" id="mytree" model="treeModel"jsId="dzgTree" dndController="dijit._tree.dndSource"query="{parent:null}"><mce:script type="dojo/connect"></mce:script></div><div><div dojoType="dijit.form.Button" jsId="insertBtn">添加</div><div dojoType="dijit.form.Button" jsId="delBtn">删除</div><div dojoType="dijit.form.Button" jsId="updateBtn">修改</div></div></div><div dojoType="dijit.layout.ContentPane" title="权限管理"id="roseContentPane"><ul id="leftUl1" class="leftUl1"><li><a href="mainFrame.jsp" mce_href="mainFrame.jsp" target="mainFrame"> <imgalt="管理角色并分配权限" src="images/Role.gif"><br><b>角色管理</b></a></li><li><a href="category_manager.htm" mce_href="category_manager.htm" target="mainFrame"> <imgalt="管理员维护" src="images/word.png"><br><b>模块管理</b></a></li><li><a href="moduleManager.action" mce_href="moduleManager.action" target="mainFrame"><imgalt="管理用户并分配权限" src="images/userIco.png"><br><b>用户管理</b></a></li></ul></div><div dojoType="dijit.layout.ContentPane" title="基本设置"id="basicContentPane"><ul><li><a href="advertisement_list.jsp" mce_href="advertisement_list.jsp" target="mainFrame">广告管理</a></li><li>友情链接管理</li></ul></div></div></body></html>
JavaScript
dojo.require("dijit.layout.AccordionContainer");dojo.require("dijit.layout.ContentPane");dojo.require("dojo.data.ItemFileWriteStore");dojo.require("dijit.Tree");dojo.require("dijit.Menu");dojo.require("dijit.form.Button");dojo.require("dijit.Dialog");dojo.require("dijit.form.ValidationTextBox");dojo.require("dijit._tree.dndSource");//dojo.require("dijit.Editor");//dojo.require("dijit._editor.RichText");//dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock'//dojo.require("dijit._editor.plugins.TextColor");//dojo.require("dijit._editor.plugins.LinkDialog");var lastSelected = null;/* 是添加还是修改 */var state = "";isDebug = true;dojo.addOnLoad(function() {dojo.parser.parse();clearItemInput();dijit.byId("mytree").checkItemAcceptance = function(target, source) {var item = dijit.getEnclosingWidget(target).item;return (item.id != "root" && item.type == "category");};dojo.connect(addMenu, "onClick", doAdd);// 绑定事件开始 ,jsId 是可以直接引用的jsId="addMenu" --> doAdd functiondojo.connect(editMenu, "onClick", doUpdate);dojo.connect(removeMenu, "onClick", removeCategory);// jsId="insertBtn"dojo.connect(insertBtn, "onClick", doAdd);// jsId="updateBtn"dojo.connect(updateBtn, "onClick", doUpdate);// jsId="delBtn"dojo.connect(delBtn, "onClick", removeCategory);// 绑定右键dojo.connect(dzgTree, "onClick", function(item) {lastSelected = item;/* alert("下级/n:"+lastSelected.children.length);console.debug("左绑定到右/nNAME:" + lastSelected.title + "/nID:"+ lastSelected.id + "/nURL:" + lastSelected.url);*/if (lastSelected.children != undefined) {if (lastSelected.children.length == 0&& lastSelected.url != "") {var addr = lastSelected.url + "?categoryId=" + lastSelected.id;parent.mainFrame.location = addr;console.debug("*/:" + addr);}}});dojo.connect(saveBtn, "onClick", function() {if (state == "insert" || state == "") {addCategory();} else {updateCategory();}});// onSet/onNew/onDelete:removeSelectedRows// dojo.connect(categoryJson, "onNew", "newItem");});/** * 清除表单为空 */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&sn=&parentId=" + parentId + "&description="+ cDescription + "&url=" + cUrl + "&title=" + cTitle,handleAs : "json",handle : function(response) {// 只有成功后才插入tree nodecategoryJson.setValue(categoryJson.newItem( {id : response.id,title : cTitle,url : cUrl,children : [],moduleUrl : lastSelected.moduleUrl,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;}if (confirm("确定要删除分类吗？")) {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);}});}}doAdd = function() {state = "insert";clearItemInput();dijit.byId("cDialog").attr("title", "添加分类");dijit.byId("cDialog").show();}/* 取表单值-到修改,这里已经点击了树，所以当前lastSelected为需要修改的当前节点 */function doUpdate() {// 检查节点是否选择if (!lastSelected || !categoryJson.isItem(lastSelected)) {// alert('添加节点!'+!lastSelected || !categoryJson.isItem(lastSelected));alert('请选择节点!');return;}state = "update";dijit.byId("cDialog").attr("title", "修改分类");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);dijit.byId("cDialog").show();}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 cSn = dijit.byId('cSn').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",// 参数名是随意起的content : {id : cId,title : cTitle,description : cDescription,moduleUrl : lastSelected.moduleUrl,url : cUrl,sn:cSn},timeout : 1000,load : function() {console.debug("修改成功!");},error : function() {alert('Uh oh. 修改/'t 出错啦.');}});}
struts + struts config

ClassTreeAction

package com.flexoa.struts.action;import java.util.List;import com.flexoa.hibernate.ClassifyManager;import com.flexoa.struts.BaseAction;@SuppressWarnings("unchecked")public class ClassTreeAction extends BaseAction {private static final long serialVersionUID = -126333791867893581L;private ClassifyManager classifyManager;// 分类private List items;private int parentId;private final String identifier = "id";private final String label = "title";@Overridepublic String execute() throws Exception {// category = categoryManager.findCategory(categoryId);items = classifyManager.findClassifys(parentId, 0, userId, 0,Integer.MAX_VALUE).getList();return SUCCESS;}public int getParentId() {return parentId;}public void setParentId(int parentId) {this.parentId = parentId;}public List getItems() {return items;}public void setItems(List items) {this.items = items;}public void setClassifyManager(ClassifyManager classifyManager) {this.classifyManager = classifyManager;}public String getIdentifier() {return identifier;}public String getLabel() {return label;}}

struts-category-tree.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="removeTreeNode" class="categoryTreeBean" method="removeTreeNode"><result type="json"></result></action></package></struts>

hibernate + pojo

package com.flexoa.hibernate.impl;import com.flexoa.hibernate.CategoryManager;import com.flexoa.model.Category;import com.flexoa.model.PagerModel;public class CategoryManagerImpl extends AbstractSearch implementsCategoryManager {public void saveOrUpdate(Category category, int parentId) {if (parentId != 0){Category parent = findCategory(parentId);category.setParent(parent);category.setModuleUrl(parent.getModuleUrl());category.setUrl(parent.getUrl());}getHibernateTemplate().save(category);//可厌，非得保存后才有ID值 //修改SNcategory.setSn(category.getParent()== null ?(category.getId()+""):category.getParent().getSn()+"_"+category.getId());getHibernateTemplate().update(category);}public void save(Category category, int parentId) {if (parentId != 0){Category parent = findCategory(parentId);category.setParent(parent);category.setModuleUrl(parent.getModuleUrl());category.setUrl(parent.getUrl());}getHibernateTemplate().save(category);//修改SNcategory.setSn(category.getParent()== null ?(category.getId()+""):(category.getParent().getSn() == null ? category.getParent().getId():category.getParent().getSn())+"_"+category.getId());getHibernateTemplate().update(category);}public void update(Category category, int parentId) {if (parentId != 0){Category parent = findCategory(parentId);category.setParent(parent);category.setModuleUrl(parent.getModuleUrl());category.setUrl(parent.getUrl());}getHibernateTemplate().update(category);//修改SNcategory.setSn(category.getParent()== null ?(category.getId()+""):category.getParent().getSn()+"_"+category.getId());getHibernateTemplate().update(category);}public void updateText(Category category) {StringBuffer sb = new StringBuffer();sb.append("UPDATE Category SET url='"+category.getUrl());sb.append("',title='"+category.getTitle());sb.append("',description='"+category.getDescription());sb.append("' WHERE id="+category.getId());System.out.println("sb.toString() "+sb.toString());getSession().createSQLQuery(sb.toString()).executeUpdate();}public void deleteCategory(int id) {getHibernateTemplate().delete(findCategory(id));}/** * 替代的方法，改良的方法 * @param id * @return */public boolean removeCategory(int id){Category c = findCategory(id);if (c.getChildren().size()>0)return false;else {getHibernateTemplate().delete(c);return true;}}public Category findCategory(int id) {return (Category) getHibernateTemplate().load(Category.class, id);}public PagerModel findCategorys(int parentId, int offset, int pageSize) {String hqlObj = "FROM Category AS c WHERE c.parent is null ORDER BY c.id ASC,sortingCode DESC";if (parentId != 0)hqlObj = "FROM Category AS c WHERE c.parent=" + parentId+ " ORDER BY c.id ASC,sortingCode DESC";return searchPaginated(hqlObj, offset, pageSize);}}

Category.java

package com.flexoa.model;import java.util.Set;/** * @author 分类、模块 * @hibernate.class table="category" */public class Category {/** * @hibernate.id generator-class="native" */private int id;/** * @hibernate.property */private String title;/** * @hibernate.property not-null="true" unique="true" */private String sn;/** * @hibernate.property */private String moduleUrl;/** * 描述 * * @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 String getModuleUrl() {return moduleUrl;}public void setModuleUrl(String moduleUrl) {this.moduleUrl = moduleUrl;}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;}public String getSn() {return sn;}public void setSn(String sn) {this.sn = sn;}}

数据库是用xdoclet生成。

这里也贴出来备份的数据库脚本

/*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,
`pid` int(11) DEFAULT NULL,
`viewUrl` varchar(255) DEFAULT NULL,
`sortingCode` int(11) DEFAULT NULL,
`description` longtext,
`moduleUrl` varchar(255) DEFAULT NULL,
`sn` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `sn` (`sn`),
KEY `FK302BCFED3B107E4` (`pid`),
CONSTRAINT `FK302BCFED3B107E4` FOREIGN KEY (`pid`) REFERENCES `category` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=utf8;

/*Data for the table `category` */

insert into `category`(`id`,`title`,`url`,`pid`,`viewUrl`,`sortingCode`,`description`,`moduleUrl`,`sn`) values (1,'管理菜单',NULL,NULL,NULL,2010,NULL,NULL,'1'),(2,'景点大全',NULL,1,NULL,2010,NULL,'scenicManager.action','1_2'),(3,'热门活动','',1,NULL,20100107,NULL,'activitys.action','1_3'),(4,'驴客集','',1,NULL,2010,NULL,NULL,'1_4'),(5,'旅游政务资讯',NULL,8,NULL,2010,NULL,'articleManager.action','1_8_5'),(6,'车游天下','',8,NULL,2010,'',NULL,'1_8_6'),(7,'大武汉城市圈',NULL,8,NULL,2010,NULL,NULL,'1_8_7'),(8,'特色专栏',NULL,1,NULL,2010,NULL,NULL,'1_8'),(9,'旅游常识','',1,NULL,20100107,NULL,'articleManager.action','1_9'),(10,'各地指南','',1,NULL,20100107,NULL,'articleManager.action','1_10'),(11,'旅行社','',1,NULL,20100107,NULL,NULL,'1_11'),(12,'旅游线路','',1,NULL,20100107,NULL,'touristRoutes.action','1_12'),(13,'活动分类','classifyDefault.action',3,NULL,20100107,NULL,NULL,'1_3_13'),(14,'活动管理','adminDefault.action',3,NULL,20100107,NULL,NULL,'1_3_14'),(15,'吃喝玩乐','',1,NULL,20100107,'','foodManager.action','1_15'),(16,'景点分类','classifyDefault.action',2,NULL,20100107,NULL,NULL,'1_2_16'),(17,'景点管理','adminDefault.action',2,NULL,20100107,NULL,NULL,'1_2_17'),(18,'国内线路','',12,NULL,20100107,NULL,'touristRoutes.action','1_12_18'),(19,'国际线路','',12,NULL,20100107,NULL,'touristRoutes.action','1_12_19'),(20,'国内旅游线路分类','classifyDefault.action',18,NULL,20100107,NULL,NULL,'1_18_20'),(21,'国内旅游线路管理','adminDefault.action',18,NULL,20100107,NULL,NULL,'1_18_21'),(22,'国际线路分类','classifyDefault.action',19,NULL,20100107,NULL,NULL,'1_19_22'),(23,'国际线路管理','adminDefault.action',19,NULL,20100107,NULL,NULL,'1_19_23'),(24,'指南分类','classifyDefault.action',10,NULL,20100107,NULL,NULL,'1_10_24'),(25,'指南管理','adminDefault.action',10,NULL,20100107,NULL,NULL,'1_10_25'),(26,'酒店','',1,NULL,20100107,NULL,'hotelManager.action','1_26'),(27,'酒店分类','classifyDefault.action',26,NULL,20100107,NULL,NULL,'1_26_27'),(28,'酒店管理','adminDefault.action',26,NULL,20100107,NULL,NULL,'1_26_28'),(29,'旅游常识分类','classifyDefault.action',9,NULL,20100107,NULL,NULL,'1_9_34'),(30,'吃喝玩乐分类','classifyDefault.action',15,NULL,20100107,NULL,NULL,'1_15_30'),(31,'吃喝玩乐管理','adminDefault.action',15,NULL,20100107,NULL,NULL,'1_15_31'),(32,'旅游政务资讯分类','classifyDefault.action',5,NULL,20100107,NULL,NULL,'1_5_32'),(33,'旅游政务资讯管理','adminDefault.action',5,NULL,20100107,NULL,NULL,'1_5_33'),(34,'旅游常识管理','adminDefault.action',9,NULL,20100107,NULL,NULL,'1_9_29'),(35,'照片图库',NULL,1,NULL,20100107,'',NULL,'1_35'),(36,'图库分类',NULL,35,NULL,20100107,'',NULL,'1_35_36'),(37,'图库管理',NULL,35,NULL,20100107,'',NULL,'1_35_37'),(38,'在线交流工具','',1,NULL,20100107,'',NULL,'1_38'),(39,'网店设置',NULL,1,NULL,20100107,'',NULL,'1_39'),(40,'资料管理',NULL,39,NULL,20100107,'',NULL,'1_39_40'),(41,'网店频道配置','',39,NULL,20100107,'',NULL,'1_39_41'),(42,'网店营业参数设置',NULL,39,NULL,20100107,'',NULL,'1_39_42'),(43,'网店首页栏目配置',NULL,39,NULL,20100107,'',NULL,'1_39_43'),(44,'网店通栏配置',NULL,39,NULL,20100107,'',NULL,'1_39_44'),(45,'留言管理','',38,NULL,20100107,'',NULL,'1_38_45');

/*Table structure for table `classify` */

BUG说明：

如果数据一条也没有。显示就会有点问题。

解决：如果一条记录没有就执行插入操作，或手工在数据库添加一条记录

2:这并不是异步加载，算是一次性加载，从数据就库看出来，有一个children字段。

呵呵。。异步加载已经写好了。改天再整，不过一颗树就写了四篇，有点不想再写了

3:按钮基本上没用了，我留着，只是防止顾客挑剔，呵呵。。都给他用。怕他用不习惯右键菜单

dojo tree 最终版,包含前面的所有功能，并进一步重构了代码,这里直接贴代码，不再做解释

html

JavaScript

struts + struts config

ClassTreeAction

struts-category-tree.xml

hibernate + pojo

Category.java

数据库是用xdoclet生成。