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 = 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<this._serEnts.length; 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<names.length; 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<itemNode.childsCount; 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 < 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:'空'}],
   item:[

……

……

……

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