纯html左侧多级树形管理系统,bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?...

树形列表菜单的数据组织形式一般有两种：一种是一次性向服务器请求所有节点的数据，一种是先请求根目录的节点，当用户点击该节点时，再去请求该节点的子叶节点的数据。这里我们的需求是第一种。

树形菜单是我们经常会用到的一种菜单展现方式，这里我推荐bootstrap-treeview，它是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等。

前端页面的编写，比较简单，故简略描述，我们着重将后端如何按照要求组织返回所需的Json。

使用方法

首先要在页面中引入依赖的css样式和 bootstrap-treeview.js文件。

可以使用任何HTML DOM元素来作为该列表树的容器：

调用

$(function() {$.ajax({

type: "Get",

url: "doctype/FarmDoctypeLoadTreeNodes.do",

data: {id: ""},

dataType: "json",

success: function (result) {

$("#tree").treeview({

data: result.nodes, // 数据源

levels:1, //设置继承树默认展开的级别

showTags: true, //是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出

onNodeSelected: function (event, data) {

/* console.log(data); */

/* alert(data.nodeId); */

window.location = basePath + "webtype/view"

+ data.id + "/Pub1.html";

}

});

},

error: function () {

alert("加载失败！")

}

});

});

数据源要求的数据格式：

var tree = [

{

text: "Parent 1",

tags: ['2'],

nodes: [

{

text: "Child 1",

tags: ['3'],

nodes: [

{

text: "Grandchild 1",

tags: ['1']

},

{

text: "Grandchild 2",

tags: ['1']

}

]

},

{

text: "Child 2",

tags: ['1']

}

]

},

{

text: "Parent 2",

tags: ['1']

},

{

text: "Parent 3",

tags: ['1']

},

{

text: "Parent 4",

tags: ['1']

},

{

text: "Parent 5",

tags: ['1']</