前段时间项目中要做一个供应商打分模块。供应商的打分项他的展现是一棵树,所以我就想到利用DhtmlXTree来实现,因为DhtmlXTree利用少量代码就可以实现动态加载一棵树的功能。
准备工作:
1.需要的js 和jar包
dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree.css
dom4j-1.6.1.jar
2.先建立一棵DhtmlXTree
<div id="treeboxbox_tree" style="width:400px; height:600px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"> <script type="text/javascript"> tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0); </script> </div>
3.设置一下一些初始化参数
// 设置树的皮肤 tree.setSkin('dhx_skyblue'); // 设置树图片的路径 tree.setImagePath("../../images/dhtml/csh_yellowbooks/"); //设置树的编码 tree.setEscapingMode("GBK"); tree.enableCheckBoxes(0); //是否显示复选框 //从XML 加载 DhtmlXTree var s_loadURL = "<%=request.getContextPath()%>/bank/rating/getRatingProjectGuid.do"; tree.setXMLAutoLoading(s_loadURL); tree.loadXML(s_loadURL);
4利用dom4j 生成XML
/** * 生成一个可以生成DHtmlXTree的XML文件,包括根节点tree; * @return Document */ public static Document createNewDhtmlXTreeXML(){ Document document = DocumentHelper.createDocument(); Element root = document.addElement("tree"); root.addAttribute("id", "0"); return document; } /** * 向 DHtmlXTree 中添加一个新的节点 * @param element 父节点 * @param id 节点ID * @param text 节点显示的名称 * @param userData 用户 自己的数据保存在 userData 中 数据类型String * @param map 设置节点 相关属性的map (当前可以设置的属性有 im0,im1,im2,open,child) * @return Element */ public static Element buildTreeNode(Branch element , String id , String text, String userData , Map proMap){ if (element!=null && id != null && text !=null ) { Element item = element.addElement("item"); item.addAttribute("id", id); item.addAttribute("text",text); if (proMap != null ) { String im0 = (String)proMap.get("im0"); String im1 = (String)proMap.get("im1"); String im2 = (String)proMap.get("im2"); String open = (String)proMap.get("open"); String child = (String)proMap.get("child"); if (im0!=null && !"".equals(im0)) { item.addAttribute("im0",im0); } if (im1!=null && !"".equals(im1)) { item.addAttribute("im1",im1); } if (im2!=null && !"".equals(im2)) { item.addAttribute("im2",im2); } if (open!=null && !"".equals(open)) { item.addAttribute("open",open); } if (child!=null && !"".equals(child)) { item.addAttribute("child",child); } } if(userData != null && !"".equals(userData)){ Element userdata = item.addElement("userdata"); userdata.addAttribute("name", text); userdata.addText(userData); } return item; }else{ System.out.println("Element对象为null 或者id 为null 或者text 为null "); } return null ; }
5 Dao 层 代码
public String getRatingProjectXml(String parentId) throws Exception { Document doc = null; Element item = null; try { if (parentId==null || "".equals(parentId) || "null".equals(parentId)) { // 进入根节点进行操作 Map proMap = new HashMap(); //proMap.put("im0", "tombs.gif"); proMap.put("open", "1"); doc = XmlUtil.createNewDhtmlXTreeXML(); // 得到一个用于生成DHtmlXTree 的XML 文件 // 添加根节点 item = XmlUtil.buildTreeNode(doc.getRootElement(), Common.DOMAIN_ROOT_ID, Common.DOMAIN_ROOT_NAME, null, proMap); // 得到一级节点 List<BRatingProject> bRatingProjects = getBRatingProjectByParentId(Integer.parseInt(Common.DOMAIN_ROOT_ID)); getRatingProjectXml(item,bRatingProjects); }else { // 进入非根节点 doc = XmlUtil.createNewXml(); BRatingProject bRatingProject = getBRatingProjectById(Integer.parseInt(parentId)); List<BRatingProject> bRatingProjects = getBRatingProjectByParentId(Integer.parseInt(parentId)); int id = bRatingProject.getId(); String name = bRatingProject.getName(); /**是否叶子节点 1. 代表是叶子节点,0 代表不是叶子节点*/ int isLeaf = bRatingProject.getIsLeaf(); Map proMap = new HashMap(); //proMap.put("im0","book_titel.gif"); if (isLeaf==0) { proMap.put("child", "1"); } item = XmlUtil.buildTreeNode(doc, id+"", name, null, proMap); getRatingProjectXml(item,bRatingProjects); } if (doc == null ) { doc = XmlUtil.createNewDhtmlXTreeXML(); } } catch (Exception e) { e.printStackTrace(); } return doc.asXML(); } private void getRatingProjectXml(Branch item, List<BRatingProject> childList) throws Exception{ if (childList!=null && !childList.isEmpty() && item!=null) { for (BRatingProject bRatingProject : childList) { int id = bRatingProject.getId(); String name = bRatingProject.getName(); /**是否叶子节点 1. 代表是叶子节点,0 代表不是叶子节点*/ int isLeaf = bRatingProject.getIsLeaf(); Map proMap = new HashMap(); //proMap.put("im0","book_titel.gif"); if (isLeaf==0) { proMap.put("child", "1"); } Element items = XmlUtil.buildTreeNode(item, id+"", name, null, proMap); if(isLeaf==0){ // 递归 List<BRatingProject> childLists = getBRatingProjectByParentId(id); getRatingProjectXml(items, childLists); } } } }
6 呈现层
/** * 展示树 * @return */ public String getRatingProjectGuid(){ HttpServletResponse response = getResponse(); response.setContentType("text/xml; charset=GBK"); response.setHeader("Cache-control","no-cache"); try { String s_subId = getParameter("id"); String xml = ratingDao.getRatingProjectXml(s_subId); //System.out.println(xml); response.getWriter().print(xml); } catch (Exception e) { e.printStackTrace(); return "error"; } return null; }
下面有一些DhtmlXTree 的一些资料。为了以后方便自己的查阅,特放在此处!