DHTMLXTree 读取 xml （入门版）
这几天被分到在js调用xml文件显示在界面。从网上搜了很多资料，看了乱七八糟的，官方的API真的很扯淡，你说英语也就罢了，写的那么简单，你都不知道这个参数在里面怎么用，哎，不过总算搞出来了。
------------------------------------------------------------------------------------------------------
DHtmlXTree 开发包：
点击打开链接
DHtmlXTree 简单API介绍（中文）：
点击打开链接
------------------------------------------------------------------------------------------------------
具体是这么实现的：
1.在一个html文件中有一个table用于将来显示内容的。
2.通过Dhtmextree构造个tree，然后会显示在界面上一个tree
3.当点击tree的某个节点时，右侧的tabel会动态显示当前节点下的自定义数据信息。
4.可以动态修改，修改了点击应用，会修改tree的自定义数据。
5.点击确定的话，回调用我写过的QT写XML文件的插件，然后把新的tree写入到xml中（因为我主要是做QT的，整个系统中都是用的QT的东西，就调用QT的插件了。PS：Dhtmextree写xml的方法我找了一下，可是没有多少能写的很好的，大部分是调用java的Dom4j，当然像我这样调用QT的也可以。自己看着办吧。）
具体如下：
1.要读取的XML格式（即Dhtmlxtree能读取的标准格式）
<?xml version="1.0" ?>
<tree id="0">
<item id="1" open="1" text="工作目录" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<item id="11" text="工作目录" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<userdata name="value">C:\smart</userdata>
</item>
</item>
<item id="2" open="1" text="数据服务器地址" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<item id="21" text="地址" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<userdata name="value">127.0.0.1</userdata>
</item>
<item id="22" select="1" text="端口号" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<userdata name="value">124</userdata>
</item>
</item>
<item id="3" open="1" text="集成软件路径" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<item id="31" text="路径" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<userdata name="value">C:\smart\plug\</userdata>
</item>
<item id="32" text="变量" im0="leaf.gif" im1="folderOpen.gif" im2="folderClosed.gif">
<userdata name="value">23</userdata>
</item>
</item>
</tree>
就简单读取xml话，我们需要dhtmlxtree.js、 dhtmlxcommon.js、dhtmlxtree_xw.js这三个文件，所以考到你自己的地方，然后包含进html文件中（<script type="text/javascript" src="scripts/dhtmlxtree.js"></script>）
head中加入如下：
<script type="text/javascript" src="scripts/dhtmlxtree.js"></script> <script type="text/javascript" src="scripts/dhtmlxcommon.js"></script> <script type="text/javascript" src="scripts/dhtmlxtree_xw.js"></script>
3.建个table，用于放你读出来的东西（很好理解吧）
<div align="center"> <form name="subform" onsubmit="optionsubmit()"> <table width="100%" height="400" cellpadding="0" cellspacing="0" border="1" bordercolor="#0000FF" background="images/bg33.PNG"> <tr> <td id=item width="30%"> </td> <td valign="top" align="left"> <FIELDSET> <br /> 配置参数： <br /> <input name="property" type="text" size="54"> </FIELDSET> <table width="100%" height="80%"> <tr> <td valign="bottom" align="right"> <input type="button" onClick="optionapply();" name="used" value="应用" id="buttonsub"/> </td> </tr> </table> </td> </tr> </table> <table width="100%"> <tr> <td valign="top" align="right"> <input type="submit" name="submit" value="确定" id="buttonsub" /> <input type="reset" name="reset" value="取消" /> </td> </tr> </table> </form> </div>
注意几处标注的地方：subform是个表单的名字，item是最重要的，我们接下来要创建一个tree，tree的名字就叫item，这样创建的tree就会主动的现实在表格中了。
4.创建Dhtmlxtree
<script>
var tree;
//这是创建树和赋值树，一起执行了
tree = new dhtmlXTreeObject("item", "100%", "100%", 0);
//设置图标的样式，在你下载的dhtmlxtree中有，就是将来显示的小图标是什么风格的
tree.setImagePath("imgs/csh_vista/");
//显示图标吗？
tree.enableTreeImages("true");
//显示连接线吗？
tree.enableTreeLines("true");
//加载xml文件，这是最主要的，就是能读取出xml中的内容，生成树，但是要全路径哦！
tree.loadXML(C:/xml/option_settings.xml);
//设置点击事件，onTaskDataTypeSelected是一个js函数，接下来介绍
tree.setOnClickHandler(onTaskDataTypeSelected);
</script>
到此为止，我们就生成了一个tree了，并且能显示在界面了（由于单位要求，所以不能贴上截图，见谅）
5.有了tree，那么我们还要得到tree中的信息，就是上面xml中userData中的信息。
开始写鼠标点击tree节点的事件了：
function onTaskDataTypeSelected() {
//拿到当前被选择的节点，赋值给current_id（已在前面定义过）
var itemid = tree.getSelectedItemId();
current_id = itemid;
//拿到当前节点的目录曾
current_tree_level = tree.getLevel(current_id);
//switch语句，你懂得
switch (current_tree_level) {
case 1:
return;
case 2:
//拿到自定义数据（参数：节点id，和自定义数据的名称（和前面的xml对应）） var datavalue = tree.getUserData(current_id, "value");
//显示在<input>框中
document.subform.property.value = datavalue;
return;
}//end switch
}
function optionapply() {
var updatevalue = document.subform.property.value;
tree.setUserData(current_id, "value", updatevalue);
}
我想这就不用加注释了吧。
7.从新写入xml（调用了QT插件）
//submit atcion : update tree
function optionsubmit() {
var updatevalue = document.subform.property.value;
tree.setUserData(current_id, "value", updatevalue);
resettreexmlcontent();
}
//write tree to xml file
function resettreexmlcontent() {
var xmlpath = getXmlFilePath();
tree.setSerializationLevel(true, true);
var getcontents = tree.serializeTree();
//此处省略调用QT插件代码
alert("successed");
}
</script>
------------------------------------------------------------------------------------------------------
DHtmlXTree 开发包：
点击打开链接
DHtmlXTree 简单API介绍（中文）：
点击打开链接
------------------------------------------------------------------------------------------------------
刚接触这个东西，具体还不太理解，难免有错误之处，请不吝指正。
另：今天收到新任务，说右侧用table不可以，让用dhtmlform，接下来搞一下，可能会在下一篇日志中提及！