JSTree--JSON--你常用的几个功能展示

JSTree是基于JQuery的一个树型插件，1.0之后的编码风格跟JQuery完全一致，JSTree完全实现了组件化，并且支持html、json、xml等多种数据源格式，完全可以实现动态加载，它的主要组件有themes、json_data、html_data、xml_data、ui、crrm、types、contextmenu、search等等。不废话，直接上JSON的例子。

$(function() {
$("#demo1").jstree(
{

//json格式数据

"json_data" : {
"data" : [ {
"data" : {
"title" : "结点1"
},
"attr" : {
"rel" : "folder",
"id" : "1"
},
"state" : "closed",
"children" : [ {
"attr" : {
"rel" : "folder",
"id" : "11"
},
"data" : {
"title" : "结点11"

},
"children" : [ {
"attr" : {
"rel" : "file",
"id" : "11"
},
"data" : {
"title" : "结点111"

}
}, {
"attr" : {
"rel" : "file",
"id" : "12"
},
"data" : {
"title" : "结点112"

}
} ]
}, {
"attr" : {
"rel" : "file",
"id" : "12"
},
"data" : {
"title" : "结点12"

}
} ]
}, {
"attr" : {
"id" : "2"
},
"data" : {
"title" : "结点2"

},
"children" : [ {
"attr" : {
"id" : "21"
},
"data" : {
"title" : "结点21"

}
}, {
"attr" : {
"id" : "22"
},
"data" : {
"title" : "结点22"

}
} ]
} ]
},

//右键菜单组件，支持增删改
"contextmenu" : {
"items" : { // Could be a function that should return an object like this one
"create" : {
"separator_before" : false,
"separator_after" : true,
"label" : "添加结点",
"action" : function(obj) {
this.create(obj);
}
},
"rename" : {
"separator_before" : false,
"separator_after" : false,
"label" : "重新命名",
"action" : function(obj) {
this.rename(obj);
}
},
"remove" : {
"separator_before" : false,
"icon" : false,
"separator_after" : false,
"label" : "删除结点",
"action" : function(obj) {
this.remove(obj);
}
},
"ccp" : {
"separator_before" : true,
"icon" : false,
"separator_after" : false,
"label" : "编辑结点",
"action" : false,
"submenu" : {
"cut" : {
"separator_before" : false,
"separator_after" : false,
"label" : "剪切",
"action" : function(obj) {
this.cut(obj);
}
},
"copy" : {
"separator_before" : false,
"icon" : false,
"separator_after" : false,
"label" : "拷贝",
"action" : function(obj) {
this.copy(obj);
}
},
"paste" : {
"separator_before" : false,
"icon" : false,
"separator_after" : false,
"label" : "粘贴",
"action" : function(obj) {
this.paste(obj);
}
}
}
}
}
},

//自定义文件夹和文件的图片样式
"types" : {
"valid_children" : [ "file" ],
"types" : {
"file" : {
"icon" : {
"image" : "../themes/img/page.gif"
},
"valid_children" : [ "default" ],
"max_depth" : 2,
"hover_node" : false
},
"default" : {
"valid_children" : [ "default" ]
}
}
},

//组装组件声明
"plugins" : [ "themes", "json_data", "ui", "crrm",
"contextmenu", "types" ]
}).bind("select_node.jstree", function(event, data) {

//绑定选中事件，获得结点ID和名称
//$("#txtSelectedValue").val(
// "id=" + data.rslt.obj.attr("id") + " text="
// + data.rslt.obj.children("a").text());
}).bind(
"click.jstree",
function(event, data) {

//绑定单击事件，获得结点ID和名称
var eventNodeName = event.target.nodeName;

//如果是合拢或展开的图片结点，则返回
if (eventNodeName == 'INS') {
var nextNodeName = event.target.nextSibling.nodeName;
if (nextNodeName == 'A')
return;
} else if (eventNodeName == 'A') {
var $subject = $(event.target).parent();
var n = $(event.target).parents('li');
$("#txtSelectedValue").val(
"id=" + n.attr('id') + " text="
+ $(event.target).text());
}

//设置皮肤为经典
}).jstree("set_theme", "classic");
});