最近才接触到dhtmlXTree，下载地址
感觉这个玩意生成树不错，粗略看了下API，其中有个loadJSONObject的方法，根据示例，只需要简单得定义Json数据对象就能很方便就能生成树：
//定义json数据对象
var jsondata = ...{id:0, item:[...{id:1,text:"first"},...{id:2, text:"middle", item:[...{id:"21", text:"child"}]},...{id:3,text:"last"}]};
tree=new dhtmlXTreeObject("div_tree","100%","100%",0);
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableCheckBoxes(true);//是否有checkbox
tree.enableThreeStateCheckboxes(true);
//从json对象中获取数据生成树
tree.loadJSONObject(jsondata);
结合实际项目而言，如果我们数据库中有一组数据需要用树来表现，fid表示父id
id fid type name remark
X1 X1 1 壹
X11 X1 2 壹壹
X12 X1 2 壹贰
X2 X2 1 贰
X21 X2 2 贰壹
X3 X3 2 叁
我们在后台生成json数据对象
{id:0, item:[
{id:'X1',text:"壹"],item:[
{id:'X11',text:"壹壹"]},
{id:'X12',text:"壹贰"]}]},
{id:'X2', text:"贰"],item:[
{id:"X21", text:"贰壹"]}]},
{id:'X3',text:"叁"]}]}
生成树如下图
之后我们可以根据dhtmlXTree提供的方法对树进行操作，具体可参考dhtmlXTree的API文档，大多数应用中，我们只需要能获取节点的ID就够了，但有些应用中，我们往往希望一个树的节点能保存更多我们需要的信息，或者是在树的初始化时，就能对树进行一些个性化的控制。
在查看过dhtmlXTree提供的文档中，发现一个很有意思的东东，userdata ，也就是说我们可以为每个节点定义自己的userdata ，用来保存我们需要的数据，通过getUserData方法获取这些数据，但是除了setUserData的方法外，我没找到如何在json数据对象中，直接定义userdata ，而loadXML方法中，则可以在XML中直接定义userdata ，如下所示：
数据
那json数据能不能直接定义userdata呢？试了很多方式都不成功，于是仔细查了下dhtmlXTree的JS源码。
哈，在dhtmlxtree_json.js文件中，我找到了这样一个方法：
dhtmlXTreeObject.prototype._serializeItemJSON=function(itemNode)...{
var out=[];
if (itemNode.unParsed)
return (itemNode.unParsed.text());
if (this._selected.length)
var lid=this._selected[0].id;
else lid="";
var text=itemNode.span.innerHTML;
if (this._xescapeEntities)
for (var i=0; i text=text.replace(this._serEnts[i][2],this._serEnts[i][1]);
if (!this._xfullXML)
out.push('{ id:"'+itemNode.id+'", '+(this._getOpenState(itemNode)==1?' open:"1", ':'')+(lid==itemNode.id?' select:"1",':'')+' text:"'+text+'"'+( ((this.XMLsource)&&(itemNode.XMLload==0))?", child:"1" ":""));
else
out.push('{ id:"'+itemNode.id+'", '+(this._getOpenState(itemNode)==1?' open:"1", ':'')+(lid==itemNode.id?' select:"1",':'')+' text:"'+text+'", im0:"'+itemNode.images[0]+'", im1:"'+itemNode.images[1]+'", im2:"'+itemNode.images[2]+'" '+(itemNode.acolor?(', aCol:"'+itemNode.acolor+'" '):'')+(itemNode.scolor?(', sCol:"'+itemNode.scolor+'" '):'')+(itemNode.checkstate==1?', checked:"1" ':(itemNode.checkstate==2?', checked:"-1"':''))+(itemNode.closeable?', closeable:"1" ':''));
if ((this._xuserData)&&(itemNode._userdatalist))
...{
out.push(", userdata:[");
var names=itemNode._userdatalist.split(",");
var p=[];
for (var i=0; i p.push+="{ name:""+names[i]+"" , content:""+itemNode.userData["t_"+names[i]]+"" }";
out.push(p.join(",")); out.push("]");
}
if (itemNode.childsCount)...{
out.push(", item:[");
var p=[];
for (var i=0; i p.push(this._serializeItemJSON(itemNode.childNodes[i]));
out.push(p.join(","));
out.push("] ");
}
out.push("} ")
return out.join("");
}
先不去分析这个方法是干什么用的，看其中这句
out.push('{ id:"'+itemNode.id+'", '+(this._getOpenState(itemNode)==1?' open:"1", ':'')+(lid==itemNode.id?' select:"1",':'')+' text:"'+text+'", im0:"'+itemNode.images[0]+'", im1:"'+itemNode.images[1]+'", im2:"'+itemNode.images[2]+'" '+(itemNode.acolor?(', aCol:"'+itemNode.acolor+'" '):'')+(itemNode.scolor?(', sCol:"'+itemNode.scolor+'" '):'')+(itemNode.checkstate==1?', checked:"1" ':(itemNode.checkstate==2?', checked:"-1"':''))+(itemNode.closeable?', closeable:"1" ':''));
可以看出，我们的json数据对象中的一个节点对象就可以包含如此多的属性：
id,text,im0,im1,im2,open,select,aCol,sCol,checked,closeable
除了id,text，其它可都是能控制树节点状态的，也就是说，我们在产生json数据的时候，接可以直接指定节点的状态。
其中im0,im1,im2，取值字符串，如:'treeimg1.gif'，指定节点在展开，收缩，选中三种状态下的图标。
open，select，checked，closeable，取值0和1，分别表示，节点展开，节点被选中，节点的checkbox被勾选，节点是否能被关闭（收缩）。
sCol，aCol,，表示节点被选中或没选中的文字颜色，取值如'#ff0000'
写成josn就成了
var JSON_OBJECT = {id:0,
item:[
{id:'X1',text:"壹",open:'0',im0:'treeimg0.gif',im1:'treeimg1.gif',im2:'treeimg2.gif',select:'1',aCol:'#ff0000',checked:"1",sCol:'#ffff00',closeable:'0',
item:[
……
……
……
现在我们能通过在json数据对象中对节点的属性赋值，来控制节点的状态了，再看下一段代码：
out.push(", userdata:[");
var names=itemNode._userdatalist.split(",");
var p=[];
for (var i=0; i p.push+="{ name:""+names[i]+"" , content:""+itemNode.userData["t_"+names[i]]+"" }";
out.push(p.join(",")); out.push("]");
期盼已久的userdata出现了，在一个for循环中获取数据，哈哈，反之，我们已经知道了该怎样在json中定义userdata了，结合前面的那个数据表把剩余的字段填进去
userdata：[{name:'type',content:'1'},{name:'remark',content:'空'}]
一个josn中节点对象完整的例子如
var JSON_OBJECT = {id:0,
item:[
{id:'X1',text:"壹",open:'0',im0:'treeimg0.gif',im1:'treeimg1.gif',im2:'treeimg2.gif',
select:'1',aCol:'#ff0000',checked:"1",sCol:'#ffff00',closeable:'0',
userdata：[{name:'type',content:'1'},{name:'remark',content:'空'}],
item:[
……
……
……
想怎样控制就怎样控制，需要什么数据就给什么数据，还有什么不能做的呢？
