前段时间项目中要做一个供应商打分模块。供应商的打分项他的展现是一棵树,所以我就想到利用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 的一些资料。为了以后方便自己的查阅,特放在此处!
分享到:
相关推荐
里面包含创建一棵树用到的js和必要的jar包
dhtmlXtree树 右dhtmlXtree键菜单
dhtmlxtree和json的应用。自己写的练习项目,免费下载。
专业版dhtmlxtree下载 专业版dhtmlxtree下载
dhtmlxtree例子
dhtmlxTree文档,代码都有,控件学习
包含dhtmlxTree(树型控件),dhtmlxTabbar(选项卡),dhtmlxGrid(数据表格),dhtmlxCombo(下拉选项),dhtmlxTreeGrid(树型表格),dhtmlxVault(文件上传控件),dhtmlxMenu(菜单),dhtmlxToolbar(工具条),dhtmlxCalendar(日历...
dhtmlxtree中文开发指导,简单介绍dhtmlxtree的使用。初学者适合。
dhtmlXTree1.6,js实现的树结构的目录
dhtmlxTree 树形控件 JavaScript
dhtmlxtree实例包括复选、右键菜单、拖拽等功能
第三方树控件dhtmlxTree 3.6
dhtmlxtree构建动态维护树,介绍dhtmltree的构建以及修改!
dhtmlxTree专业版
DHtmlXTree 调用xml http://blog.csdn.net/ymc0329/article/details/6619796
dhtmlxTree 最好的tree控件