怎么使用DHTMLXTREE-实战演示
日期：2014-05-17 浏览次数：20920 次
如何使用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();
只是本人的一点学习心得，如有拙见，欢迎纰漏
我乐此不疲的这么使用 好使，管用！
首先下载最新版本的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();
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
