如何使用DHTMLXTREE---实战演示 -

332575101

浏览: 20714 次
性别:
来自: 齐齐哈尔

最近访客更多访客>>

liuyuyi

iy2017

鹿目圆香

war3test

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

如何使用DHTMLXTREE---实战演示

博客分类：

DHTMLXTREE

只是本人的一点学习心得，如有拙见，欢迎纰漏
我乐此不疲的这么使用       好使，管用！
首先下载最新版本的dhtmlxtree

解压-----> index.html
Data Presentation & Navigation--------->dhtmlxTree--->initialization_of_dhtmlxtree
如想锻炼下英文能力可以参照以上研读    或者跟着我一起做！
come on baby!
首先确保在WebRoot中有所需的js文件
/js/dhtmlxtree/dhtmlxcommon.js
/js/dhtmlxtree/dhtmlxtree.css
js/dhtmlxtree/dhtmlxtree.js
ext   imgs 也放在dhtmlxtree下（为了方便就可以将解压后\dhtmlxTree\codebase里的东西一股脑的copy到webroot下的js）
为了安全起见在WEB-INF 中建个jsp页面来显示树（用数据库数据显示树）
首先在jsp中
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/dhtmlxtree/dhtmlxtree.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dhtmlxtree/dhtmlxtree.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dhtmlxtree/dhtmlxcommon.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

然后开始构建自己的树

<body>

<div id="treeBox" style="width:200;height:200"></div>
<script>
/*
* Parameters passed to the constructor are the following:
* Object to attach the tree to (should be loaded before the constructor is called)
* Width of the tree;
* Height of the tree;
* Identifier of the tree root level (super root)
* @param {Object} nodeId
*/
var tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
//使用树所用到的图片
tree.setImagePath("${pageContext.request.contextPath}/js/dhtmlxtree/imgs/csh_books/");
// 是否支持每一个节点前的多选框
tree.enableCheckBoxes(true);
// 是否允许拖放动作
tree.enableDragAndDrop(true);

//tree.setXMLAutoLoading("resource/tree.xml");另一种生成树的方式静态树
//动态生成树
tree.loadXML("${pageContext.request.contextPath}/org/makeTree.action");//load root level from xml
    //点击每一个节点产生的效果
tree.attachEvent("onClick",function(nodeId){
//alert(nodeId);
tree.openItem(nodeId);
window.parent.frames["rightFrame"].location = "${pageContext.request.contextPath}/org/detail.action?org.id="+nodeId;
});
</script>

</body>

树是建造好了现在开始往树的支、页加数据

在此之前先把工程SSH架构上
struts_xxx.xml
applicationContext-xxx.xml
applicationContext-action.xml
applicationContext-service.xml
applicationContext-dao.xml
hibernate.cfg.xml
按自己的实体类自己配置吧
dao层查找根节点
我主要说下service层如何makeTree
public String makeTree() {
//首先找到根节点
Org root = orgDao.findFirstLevelNode();
//从根节点，开始找
String treeStr = new OrgXmlTreeMaker(root).make();

return treeStr;
}

class OrgXmlTreeMaker{
private Org root;
public OrgXmlTreeMaker(Org root){
this.root = root;
}

private StringBuilder sb = new StringBuilder();

public String make(){
sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?><tree id=\"0\">");
//在这里进行递归
make(root);
sb.append("</tree>");
return sb.toString();
}

public void make(Org org){
sb.append("<item text=\""+org.getShortName()+"\" id=\""+org.getId()+"\" >");
Set<Org> orgSet = org.getChildren();
for(Org o:orgSet){
make(o);
}
sb.append("</item>");
}

}

//action层返回返回机构树
public String makeTree() throws Exception{
String treeStr = orgService.makeTree();
HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/xml;charset=utf-8");

response.getWriter().print(treeStr);

return null;
}

分享到：