使用zTree实现导航树、angular实现数据动态绑定功能
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";
%>
Inventory Group Tree
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
<%@ 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);
%>
Inventory List
{{thValue}}
{{ resource.alias }}
{{ resource.ip }}
{{ resource.port }}
{{ resource.version }}
{{ resource.state }}
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 += '';
}
$('#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.其他资源
汽车租赁管理系统实现源码及相关文档