html5 jstree树形菜单,简单的JsTree 树形视图 checkbox demo

jsTree是一个基于jQuery的Tree控件。支持 XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。 更多信息请访问： http://www.jstree.com/

该demo基于json数据

实现效果：

下载并引入jquery和jstree以及相应的css

jstree

function openId(){

//获取选中的节点

var nodes=$("#using_json").jstree("get_checked");

alert(nodes);

}

$(function(){

$("#using_json").jstree({

"core": {

"data": ["Empty Folder", {

"id":1,

"text": "Resources",

"state": {

"opened": true

},

"children": [{

"id":2,

"text": "css",

"children": [{

"id":3,

"text": "animate.css",

"icon": "none"

},

{

"id":4,

"text": "bootstrap.css",

"icon": "none"

},

{

"id":5,

"text": "main.css",

"icon": "none"

},

{

"id":6,

"text": "style.css",

"icon": "none"

}],

"state": {

"opened": true

}

},

{

"id":20,

"text": "js",

"children": [{

"id":7,

"text": "bootstrap.js",

"icon": "none"

},

{

"id":8,

"text": "hplus.min.js",

"icon": "none"

},

{

"id":9,

"text": "jquery.min.js",

"icon": "none",

"state":{

"selected":true

}

},

{

"id":10,

"text": "jsTree.min.js",

"icon": "none"

},

{

"id":11,

"text": "custom.min.js",

"icon": "none"

}],

"state": {

"opened": true

}

},

{

"id":17,

"text": "html",

"children": [{

"id":12,

"text": "layout.html",

"icon": "none"

},

{

"id":13,

"text": "navigation.html",

"icon": "none"

},

{

"id":14,

"text": "navbar.html",

"icon": "none"

},

{

"id":15,

"text": "footer.html",

"icon": "none"

},

{

"id":16,

"text": "sidebar.html",

"icon": "none"

}],

"state": {

"opened": true

}

}]

},

"Fonts", "Images", "Scripts", "Templates", ]

},

"checkbox" : {

"keep_selected_style" : false

},

"plugins" : [ "wholerow", "checkbox" ]

})

});