使用zTree实现导航树、angular实现数据动态绑定功能

本文链接：https://blog.youkuaiyun.com/dongqing0812/article/details/49870185

本文介绍了一个基于zTree和AngularJS实现的库存资源导航树和动态数据绑定列表的示例。该示例展示了如何使用zTree插件构建资源导航树，并通过Ajax获取数据填充到AngularJS管理的表格中，同时还实现了分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.功能展示

功能展示

2.实现代码

2.1导航树

inventoryGroupTree.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/acl_view_core_bootstrap/jsp/bootstrap-config.jsp"%>
<%
    String componentPath = path + "/acl_view_inventory_navigator";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
    	var componentPath = "<%=componentPath%>";
    	var path = "<%=path%>";
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=componentPath%>/styles/inventoryGroupTree.css" type="text/css">
<link rel="stylesheet" href="<%=viewCoreJqueryComponentPath%>/styles/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="<%=viewCoreBootstrapComponentPath%>/css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="<%=viewCoreJqueryComponentPath%>/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<%=viewCoreJqueryComponentPath%>/scripts/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=viewCoreBootstrapComponentPath%>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=componentPath%>/scripts/inventoryGroupTree.js"></script>
<script type="text/javascript" src="<%=componentPath%>/scripts/inventoryGroupTree_<%=localeStr%>.js"></script>

<title>Inventory Group Tree</title>
</head>
<body>
	<div class="container body-div" style="width:100%;">
		<div class="row">
			<div class="span2 col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
				<div class="inventory-tree-background">
					<ul id="inventory-group-tree" class="ztree inventory-tree"></ul>
				</div>
			</div>
			<iframe id="inventory-tree-iframe-id"  class="span10 col-xs-10 col-sm-10 col-md-10 col-lg-10" style="height: 600px; border: solid 1px #ddd;">
			</iframe>
			
		</div>
	</div>
</body>
</html>

inventoryGroupTree.js

var pageSize = 13;
var currentPage = 1;
$(document).ready(function() {
	initTree();
});

var setting = {
	view : {
		showLine : false
	},
	async : {
		enable : true,
		dataType : "text",
		url : path + "/inventory/groupTree/inventoryGroupTreeAtion!getChildList.action",
		autoParam : [ "id=nodeId", "nodeType=nodeType", "rootResourceId=rootResourceId", "resTypeId=resTypeId" ],
		dataFilter : filter
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "pId",
			rootPId : 0
		}
	},
	callback : {
		onClick : onClick
	}
};

function filter(treeId, parentNode, childNodes) {
	if (!childNodes)
		return null;
	for (var i = 0, l = childNodes.length; i < l; i++) {
		if (childNodes[i].nodeType == "resource") {
			childNodes[i].icon = componentPath + "/images/resource-black-gray.png";
		} else if (childNodes[i].nodeType == "resourceType") {
			childNodes[i].icon = componentPath + "/images/restype-list-gray.png";
		} else {
			childNodes[i].icon = componentPath + "/images/ranking-group-gray.png";
		}
	}
	return childNodes;
}

function initTree() {
	$.ajax({
		type : "get",
		url : path + "/inventory/groupTree/inventoryGroupTreeAtion!getAllInventoryGroupsTree.action",// 方法所在页面和方法名
		contentType : "application/json; charset=utf-8",
		dataType : "json",
		success : function(data) {
			data = setGrouIcon(data);
			var zTreeObj = $.fn.zTree.init($("#inventory-group-tree"), setting, data);
		},
		error : function(err) {
			alert("Group Tree Error");
		}
	});
}

function setGrouIcon(json) {
	for (var i = 0, l = json.length; i < l; i++) {
		json[i]["icon"] = componentPath + "/images/ranking-group-gray.png";
	}
	return json;
};

function onClick(event, treeId, treeNode, clickFlag) {
	if (treeNode.nodeType == 'resource') {
		var _resTypeId = treeNode.resTypeId;
		var _resId = treeNode.id;
		$('#inventory-tree-iframe-id').attr('src', path + '/inventoryNavigator/inventoryTabAction!showCommonTab.action?resourceId=' + _resId + '&resourceTypeId=' + _resTypeId);
	} else {
		var _nodeId = treeNode.id;
		var _nodeType = treeNode.nodeType;
		var _rootResourceId = treeNode.rootResourceId;
		/*逻辑资源组判断*/
		if(treeNode.children && treeNode.children.length > 0) {
			var _childrenNodes = treeNode.children;
			var _childrenNodeType =  _childrenNodes[0].nodeType;
			if(_childrenNodeType == 'group') {
//				alert('This is a logical resource');
				return;
			}
		}
		var _resTypeId = treeNode.resTypeId;
		$('#inventory-tree-iframe-id').attr('src', path + '/inventory/groupTree/inventoryGroupTreeAtion!showList.action?nodeId=' + _nodeId
			+ '&nodeType=' + _nodeType + '&rootResourceId=' + _rootResourceId +'&resTypeId=' + _resTypeId + '¤tPage=' + currentPage + '&pageSize=' + pageSize);
	}
}

2.2数据动态绑定

inventoryList.jsp

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/acl_view_core_bootstrap/jsp/bootstrap-config.jsp"%>
<%
    String componentPath = path + "/acl_view_inventory_navigator";
	String nodeId = request.getParameter("nodeId");
	String nodeType = request.getParameter("nodeType");
	String rootResourceId = request.getParameter("rootResourceId");
	String resTypeId = request.getParameter("resTypeId");
	String pageSize = request.getParameter("pageSize");
	String currentPage = request.getParameter("currentPage");
	nodeId = ((nodeId == null) ? "" : nodeId);
	nodeType = ((nodeType == null) ? "" : nodeType);
	rootResourceId = ((rootResourceId == null) ? "" : rootResourceId);
	resTypeId = ((resTypeId == null) ? "" : resTypeId);
	pageSize = ((pageSize == null) ? "13" : pageSize);
	currentPage = ((currentPage == null) ? "1" : currentPage);
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inventory List</title>
<script type="text/javascript">
 	var path= "<%=path%>";
 	var componentPath = "<%=componentPath%>";
 	var nodeId = "<%=nodeId%>";
 	var resTypeId = "<%=resTypeId%>";
 	var nodeType = "<%=nodeType%>";
 	var rootResourceId = "<%=rootResourceId%>";
 	var pageSize = "<%=pageSize%>";
 	var currentPage = "<%=currentPage%>";
</script>
<script type="text/javascript" src="<%=viewCoreBootstrapComponentPath%>/js/angular-1.3.9.min.js"></script>
<script type="text/javascript" src="<%=componentPath%>/scripts/inventoryList_<%=localeStr%>.js"></script>
<script type="text/javascript" src="<%=componentPath%>/scripts/inventoryList.js"></script>
</head>
<body>
	<div ng-app="groupResListApp" ng-controller="groupResListController" style="width: 100%; height: 100%">
		<div style="height: 10px; width: 100%"></div>
		<div style="height: 510px; width: 100%;">
			<table class="table table-bordered table-hover table-striped">
				<thead id="service-table-thead">
					<tr>
						<th style="width: 140px" ng-repeat="thValue in theads">{{thValue}}</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="resource in resourceList">
						<td style="width: 140px; height: 37px">{{ resource.alias }}</td>
						<td style="width: 140px; height: 37px">{{ resource.ip }}</td>
						<td style="width: 140px; height: 37px">{{ resource.port }}</td>
						<td style="width: 140px; height: 37px">{{ resource.version }}</td>
						<td style="width: 140px; height: 37px">{{ resource.state }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="page-navigation-id" style="width: 100%;"></div>
	</div>
</body>
</html>

inventoryList.js

var totalPages;
var groupResListApp = angular.module('groupResListApp', []);
groupResListApp.controller('groupResListController', function($scope) {
	$scope.theads = [ InventoryList_I18N.alias, InventoryList_I18N.ip, InventoryList_I18N.port, InventoryList_I18N.version, InventoryList_I18N.state ];
	$.ajax({
		url : path + "/inventory/groupTree/inventoryGroupTreeAtion!getResources.action",
		contentType : "application/json; charset=utf-8",
		type : 'get',
		data : {
			nodeId : nodeId,
			nodeType : nodeType,
			resTypeId : resTypeId,
			rootResourceId : rootResourceId,
			currentPage : currentPage,
			pageSize : pageSize
		},
		async : false,
		dataType : 'json',
		success : function(resPojoList) {
			if (resPojoList.length > 0) {
				totalPages = resPojoList[0]["totalPages"];
				createPagesNav();
				$scope.resourceList = resPojoList;
			}
		},
		error : function(err) {
			alert("error:" + err);
		}
	});
})

function createPagesNav() {
	var _pageNavigationHtml = "";
	if (currentPage == '1') {
		_pageNavigationHtml += '<nav><ul class="pagination"><li class="disabled"><a href="javascript:previous();" aria-label="Previous"> <span aria-hidden="true">«</span></a></li>';
	} else {
		_pageNavigationHtml += '<nav><ul class="pagination"><li><a href="javascript:previous();" aria-label="Previous"> <span aria-hidden="true">«</span></a></li>';
	}

	var _currentLink = 1;
	while (_currentLink <= totalPages) {
		if (_currentLink == parseInt(currentPage)) {
			_pageNavigationHtml += '<li class="active"><a href="javascript:goToPage(' + _currentLink + ')">' + _currentLink + '</a></li>';
		} else {
			_pageNavigationHtml += '<li><a href="javascript:goToPage(' + _currentLink + ')">' + _currentLink + '</a></li>';
		}
		_currentLink++;
	}
	debugger
	if (currentPage == totalPages || totalPages == 0) {
		_pageNavigationHtml += '<li class="disabled"><a href="javascript:next();" aria-label="Next"> <span aria-hidden="true">»</span></a></li></ul></nav>';
	} else {
		_pageNavigationHtml += '<li><a href="javascript:next();" aria-label="Next"> <span aria-hidden="true">»</span></a></li></ul></nav>';
	}

	$('#page-navigation-id').append(_pageNavigationHtml);
}

function goToPage(pageNum) {

	currentPage = parseInt(pageNum);
	var URL = path + '/inventory/groupTree/inventoryGroupTreeAtion!showList.action?nodeId=' + nodeId + '&nodeType=' + nodeType + '&rootResourceId=' + rootResourceId + '&resTypeId=' + resTypeId + '¤tPage=' + currentPage + '&pageSize=' + pageSize;
	location.replace(URL);
}

function previous() {
	var _currentPage = parseInt(currentPage);
	if (_currentPage <= 0) {
		_currentPage = 1;
	}
	if (_currentPage > 1) {
		_currentPage -= 1;
		goToPage(_currentPage);
	}

}

function next() {
	var _currentPage = parseInt(currentPage);
	if (_currentPage > totalPages) {
		_currentPage = totalPages;
	}
	if (_currentPage < totalPages) {
		_currentPage += 1;
		goToPage(_currentPage);
	}
}

国际化： inventoryList_zh_CN.js

InventoryList_I18N = {
		alias	: "名称",
		ip 		: "IP地址",
		port    : "端口",	
		version : "版本",
		state	: "状态"
};

2.3分页

具体见inventoryList.js中相关代码

3.资源下载

angular及zTree相关资源下载

zTree实例及API

zTree官网

4.其他资源

汽车租赁管理系统实现源码及相关文档