bootstrap-treeview多级树形菜单,后台JSON格式如何组织?

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

树形菜单是我们经常会用到的一种菜单展现方式,这里我推荐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",
		              tags: [
  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值