jquery.dynatree php,Jquery.dynatree.js控件的使用

斜成济
2023-12-01

1,在后台拼字符串产生json,

json的格式为:[{title :"xxxx", key: xerx, ,expand:true/false ,children:[{title:"yyyyy",key:eeee,expand:true},

{title:"zzzzz",key:dfds,expand:true}]}]。这么嵌套下去,实际使用时可以用StringBuffer这样拼字符的速度快些。expand:true时产生的树是展开的,当为false时树是闭合的。把这个json字符串放入map中在前台展示。(我用的springmvc框架)

2,引入css和js文件:

dynatree/src/skin/ui.dynatree.css,dynatree/jquery/jquery-ui.custom.js,dynatree/jquery/jquery.cookie.js,

dynatree/src/jquery.dynatree.js。

3,在jsp中添加这样的div

4,在js中:

$(function(){ //这是为了在打开页面时就调用这个方法

initTree();

});

function initTree(){

//初始化树状结构

$("#test").dynatree({

checkbox: true,

// Override class name for checkbox icon, so rasio buttons are displayed:

classNames: {nodeIcon: ""},

// Select mode 3: multi-hier

selectMode: 3,

children: ${sjon} //这个${sjon}就是后台保存在map中的json字符串

});

}

5,为该树添加全选与全部选操作:

function selectAll(){ //全选

$("#test").dynatree("getRoot").visit(function(node){

node.select(true);

});

}

function deSelectAll(){ //全不选

$("#test").dynatree("getRoot").visit(function(node){

node.select(false);

});

}

6,把此树的key发送到后台的方法:

比如这个树在 id为form1的form中,var formData = $("#form1").serializeArray();//这为了把树以外的内容序列化和树的数据一起发送

var tree1;

tree1 = $("#test").dynatree("getTree");

formData = formData.concat(tree1.serializeArray()); //这就把树的数据得到并和树之外的数据连在一起了。

然后把formData发送就over了。

7,判断树是否有节点选择

$("#test).dynatree("getSelectedNodes").length==0表示没选择。

 类似资料: