最近才接触到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:'空'}]}]};
想怎样控制就怎样控制,需要什么数据就给什么数据,还有什么不能做的呢
分享到:
相关推荐
圣诞节到了,我为大家送上java版的纯json数据构建树的demo,嘻嘻有了这个demo想建多少棵圣诞树也不是问题!送给各位位辛勤劳动的软件工程师们,祝大家圣诞快乐,新年快乐!身体健康,事业有成哦!
dhtmlxtree和json的应用。自己写的练习项目,免费下载。
博文链接:https://clarancepeng.iteye.com/blog/193058
dhtmlXtree树 右dhtmlXtree键菜单
专业版dhtmlxtree下载 专业版dhtmlxtree下载
dhtmlxtree例子
dhtmlxTree文档,代码都有,控件学习
包含dhtmlxTree(树型控件),dhtmlxTabbar(选项卡),dhtmlxGrid(数据表格),dhtmlxCombo(下拉选项),dhtmlxTreeGrid(树型表格),dhtmlxVault(文件上传控件),dhtmlxMenu(菜单),dhtmlxToolbar(工具条),dhtmlxCalendar(日历...
dhtmlxtree中文开发指导,简单介绍dhtmlxtree的使用。初学者适合。
dhtmlxTree 树形控件 JavaScript
第三方树控件dhtmlxTree 3.6
DHtmlXTree 调用xml http://blog.csdn.net/ymc0329/article/details/6619796
dhtmlxtree构建动态维护树,介绍dhtmltree的构建以及修改!
dhtmlXTree1.6,js实现的树结构的目录
dhtmlxTree专业版
dhtmlxtree实例包括复选、右键菜单、拖拽等功能