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

 

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

 

你可能感兴趣的:(html)