树形列表菜单的数据组织形式一般有两种:一种是一次性向服务器请求所有节点的数据,一种是先请求根目录的节点,当用户点击该节点时,再去请求该节点的子叶节点的数据。这里我们的需求是第一种。
树形菜单是我们经常会用到的一种菜单展现方式,这里我推荐bootstrap-treeview,它是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等。
前端页面的编写,比较简单,故简略描述,我们着重将后端如何按照要求组织返回所需的Json。
使用方法
首先要在页面中引入依赖的css样式和 bootstrap-treeview.js文件。
<!-- Required Stylesheets -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Required Javascript -->
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>
可以使用任何HTML DOM元素来作为该列表树的容器:
<div id="tree"></div>
调用
<script type="text/javascript">
$(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("加载失败!")
}
});
});
</script>
数据源要求的数据格式:
var tree = [
{
text: "Parent 1",