还有一种是树形载入完成后用jstree的展开所有节点open_all事件展开所有节点
跳转是要在生成时在li中加<a href="#">XXX<a/>或在载入完后再用js加载
JsTree是一个基于JQuery的框架，实现简单，功能比较齐全。项目中急于修改树控件，现学现卖，实现了简单的功能，仅包含异步加载，动态设置节点样式图标，靠着自己看帮助文档，多次尝试一步步完成。1. 实现异步加载
$("#tvBox").tree({
data : {
async : true,
type : "xml_flat",
[color=red]opts : {
url : URL
}
},
types : {
"default" : {
renameable : false,
deletable : false,
creatable : false,
draggable : false
}
},
ui:{
theme_name : "classic"
},
callback : {
beforedata : function(NODE, TREE_OBJ) {
setParams(NODE, TREE_OBJ)// 获取参数信息
//向服务器传递参数
return { type : type_id, dyj : dyj_id, bdz : bdz_id, jg : jg_id, ept : ept_id }
},//end beforedata
onselect : function(NODE, TREE_OBJ) { // 单击函数，点击设备节点名称的时候在右边显示信息
setParams(NODE, TREE_OBJ)// 获取参数信息
var ids = $(NODE).attr("id").split("-")
// alert(ids[6])
var subType = ids[1]
var dydj = ids[2]
//alert(type_id+" -- "+ept_id)
var nodeParam="type="+type_id+"&subType="+subType+"&bdz="+bdz_id+"&dydj="+dydj+"&ept="+ept_id
if (type_id == EptType.dyj) {//点击的是电业局节点
var dyj_url = "pages/omds/ept/dyj/dyj.jsp?dyj="+dyj_id+"&"+nodeParam
//alert(dyj_url+" -- "+dyj_name)
top.doCreateTabItem(dyj_url,
dyj_name,
dyj_url+"&random="+Math.random(),
dyj_name)//在'主页'标签中显示
}
}, //end onselect
// 只在树第一次加载的时候调用
onload : function(TREE_OBJ) {
$("#tvBox ul li a:first-child ins").hide()//电业局节点不显示图标
}
}// end callback
})// end tree()
JsTree支持多种格式的数据源，这里使用了xml格式，其实json格式更好。data中代码即可实现异步加载，通过设置UI参数可以修改主题，callback参数可以对一些事件作出响应，如beforedata可以在发送异步请求之前添加url参数，onselect可以响应生成的树中节点的单击事件，还有open在节点被打开的时候被调用，等等，可以帮助实现很多功能……
--1 碰到比较麻烦的事情是展开子节点向后台传递参数时需要用到父节点的id等信息，需要用到parent函数。
--2 另外，当展开一个节点从后台没有查询到子节点时需要返回<root></root>，不能使<root>,我当时用jdom生成xml碰到后者，出现了问题。
--3 callback中的事件需要自己去尝试才能知道什么时候被触发
2. 实现节点换肤
项目中涉及到得是电业局--变电站--间隔--设备，对于后三者节点图标必须与其状态对应，且状态是动态的，所以需要后台在生成xml的时候设置icon属性
一个带有右键 *** 作的树形菜单
$(document).ready(function(){$.ajaxSetup({cache:false})
$("#browser").tree({
data : {
type : "json",
url : src,
async : true,
async_data : function (NODE) {
return { parent_Id : $(NODE).attr("id") || 0}
}
},
lang:{
loading:"目录加载中……"
},
rules:
{
draggable : "all" //这个设置可以使得节点进行拖动 *** 作
},
ui:{
context : [ //自定义右键 *** 作的可 *** 作内容
{
id : "create",
label : "添加下级目录", //右键d出菜单的此项 *** 作屏显字样
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) }, //允许节点被右击时出现 *** 作菜单
icon : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键d出菜单的此项 *** 作图标
action : function (NODE, TREE_OBJ) {
//进行此项 *** 作，将有这个函数事件被响应
}
},
"separator"//这个是在两个 *** 作之间画一条分隔线
,
{
id : "edit",
label : "编辑目录信息",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },
icon : "<%=request.getContextPath() %>/image/reg2.gif",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})
}
},
"separator"
,
{
id : "privilege",
label : "设置目录权限",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },
icon : "<%=request.getContextPath() %>/css/themes/default/rename.png",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})
}
},
"separator",
{
id : "delete",
label : "删除",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },
icon : "<%=request.getContextPath() %>/css/themes/default/remove.png",
action : function (NODE, TREE_OBJ) {
var tree=$.tree_reference("browser")
openWindow('myurl','','',function(){
//下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
NODE=$(tree.parent(NODE))
if($(NODE).attr("id")==undefined){
tree.refresh()
}else{
TreeRefresh()
}
})
}
},
"separator",
{
id : "others",
label : "其他 *** 作",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },
icon : "<%=request.getContextPath() %>/css/images/cut.png",
action : function (NODE, TREE_OBJ) {
alert("暂无可提供 *** 作。")
}
}
]
},
callback : {
onselect: function(node) {
//(a)
}
}
})
function treeRefresh(nodeid){
var rid=nodeid
var tree=$.tree_reference("browser")
var par_node=tree.parent($("#"+rid))
tree.refresh(par_node)
}
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）