实现zTree节点显示与操作(添加,删除)同步

1. 需求

    项目的原型界面如下，左半部分是资源的结构，右半部分是资源的表格显示。需要完善的功能是：当通过右半部分的添加，删除按钮操作资源的时候，左半部分的资源树形结构需要与之同步，并且定位到操作的节点。

原型界面截图

2. 实现思路

    项目的框架：easyui+zTree。

    实现思路：ajax异步刷新，当右侧添加/删除节点之后，通过ajax异步访问数据库获得最新的资源信息，重新加载zTree，然后操作zTree节点使之定位到操作的节点。

3. 代码实现

页面代码（需要引用easyui+zTree文件）

js文件

 //zTree参数设置
	var zTree;
	var demoIframe;
	var zNodes ;
	var setting = {
			treeId:"applicationTree",
		view: {
			dblClickExpand: false,
			showLine: true,
			selectedMulti: false
		},
		data: {
			key:{
				name:"applicationName"
				},
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "applicationParentId",
				rootPId: "0"
			}
		},
		callback: {
			onClick: zTreeOnClick,
		}
	};
	//刷新资源树
	function refreshzTree(tId){
		var t = $("#tree");
		$.ajax({
			type:'post',      
            url: "queryApplicationTree",
            dataType: "text",
            async: false,
            success: function (data) {
            	zNodes=eval(data);
            },
            error: function (msg) {            
            }
       	 });
		t = $.fn.zTree.init(t, setting, zNodes);
		demoIframe = $("#testIframe");
		demoIframe.bind("load", loadReady);
		var zTree = $.fn.zTree.getZTreeObj("tree");
   		$("#"+tId + "_a").click();
   		var node = zTree.getNodeByTId(tId);
   		zTree.selectNode(node,false);
   		zTree.expandNode(node,true , false, false);//展开node一级
	};
	
	//页面加载
	$(document).ready(function(){
		 //加载资源树
		 var t = $("#tree");
		$.ajax({
			type:'post',      
            url: "queryApplicationTree",
            dataType: "text",
            async: false,
            success: function (data) {
            	zNodes=eval(data);
            	t = $.fn.zTree.init(t, setting, zNodes);
        		demoIframe = $("#testIframe");
        		demoIframe.bind("load", loadReady);
        		var zTree = $.fn.zTree.getZTreeObj("tree");
        		//首次访问主页时默认自动单击根节点
       			var treeNode=zTree.getNodeByParam("applicationParentId", "0");
           		$("#"+treeNode.tId + "_a").click();
           		var node = zTree.getNodeByTId(treeNode.tId);
           		zTree.selectNode(node,false);
           		zTree.expandNode(node, true, false, false);
            },
            error: function (msg) {            
            }
       	 });
		//显示根目录节点资源
		var applicationId = $("#applicationPid").val();
		$('#dgApplication').datagrid('load',{
			pid: applicationId
		});
	});
	
	function loadReady() {
		var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
		htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
		maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
		h = demoIframe.height() >= maxH ? minH:maxH ;
		if (h < 530) h = 530;
		demoIframe.height(h);
	}

	var url;
	//打开添加对话框
    function addApplication() {
		//获得选择节点的tId存入隐含域中
    	var nodes = $.fn.zTree.getZTreeObj("tree").getSelectedNodes();
		var tId = nodes[0].tId;
		$("#tId").val(tId);
		//打开添加应用对话框
    	 $('#dlgApplication').dialog('open').dialog('setTitle','添加应用');
         $('#fmApplica