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>

2.Dhtmlxtree要在js中使用，需要依赖几个官方的js文件，你可以百度一下Dhtmlxtree，下载之后解压，目录下 htmlxTree\sources 为要用到得资源。当然还有demo等，这些都不用说了。
 就简单读取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>

这就像java中的import，C++/QT中include一样，你懂得……

3.建个table，用于放你读出来的东西（很好理解吧）

  

<div align="center">

			<form name="subform" οnsubmit="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

	}

6.修改tree的自定义数据

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，接下来搞一下，可能会在下一篇日志中提及！