dhtmlXTree与json

最近才接触到dhtmlXTree，下载地址http://www.dhtmlx.com/

 

感觉这个玩意生成树不错，粗略看了下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 ，如下所示：

<userdata name="desc">数据</userdata>

那json数据能不能直接定义userdata呢？试了很多方式都不成功，于是仔细查了下dhtmlXTree的JS源码。

哈，在dhtmlxtree_json.js文件中，我找到了这样一个方法：dhtmlXTreeObject.prototype._serializeItemJSON

先不去分析这个方法是干什么用的，看其中这句

 

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<names.length; 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:'空'}]}]};

 

 

想怎样控制就怎样控制，需要什么数据就给什么数据，还有什么不能做的呢