用ajax跟JQuery TreeView 编一个动态的树形结构

用ajax和JQuery TreeView 编一个动态的树形结构
最近在做一个项目，就是在老的版本上添加和修改功能。
技术支持：jdk1.4，struts1.0，ibatis2.0，PSQL，javascript，jquery。
我的做的一小部分是将一个表型结构的数据集合，变成一个树形结构的显示出来。经过调查JQuery TreeView可以实现。刚开始做的时候是以一种静态树显示出来。由于自己小组做的数据库的数据太少（拼成字符串340K），显示出来是没问题的。但是到了客户给的数据（拼成字符串12M）时就内存溢出，那个悲剧啊。后来只能重新调查，发现JQuery TreeView还是可以支持动态树的，但是按照网上所说的方法去做，怎么试也试不出来，郁闷 ；迫不得已，只能自己动手了。直接上代码吧。

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/tld/biosam.tld" prefix="biosam"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<link rel="stylesheet" type="text/css" href="css/jquery.treeview.css">
<script language="javascript" type="text/javascript" src="js/jquery.numeric.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript">
        //JQuery树的展现
	$(document).ready(function(){
    	$("#black").treeview({});
	});
	//通过ajax调用到后台得到树的节点
	function getTreeNode(taxonId) {
	 var xmlHttp;
	 var getTreeNodeUrl = 'treeSource.do?taxonId='+taxonId;
	 var ulId ='ul' + taxonId.substring(2);
	 try {
	   // Firefox, Opera 8.0+, Safari
	   	 xmlHttp = new XMLHttpRequest();
	    } catch (e){
	  // Internet Explorer
		   try {
		     	 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }catch (e) {
		      try {
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		         }catch(e) {
			         return false;
		         }
		      }
	    }
	    xmlHttp.onreadystatechange = function() {
	      if(xmlHttp.readyState == 4 && xmlHttp.responseXML) {
	       //通过ajax得到数据变成xml标签
	        var searchResult = xmlHttp.responseXML;
	        var treeList =  searchResult.getElementsByTagName('node');
                //得到想要的数据并拼成显示的字符串
	        if(treeList.length != 0) {
	        	for(var i=0 ; i<treeList.length ; i++) {
	        	 var treeStr = '';
	        		var tree = treeList.item(i);
					var eltaxonId = tree.getElementsByTagName('taxonID');
					var taxonId = eltaxonId.item(0).firstChild.nodeValue.trim();
					var eltaxonText = tree.getElementsByTagName('taxonText');
					var taxonText = eltaxonText.item(0).firstChild.nodeValue.trim();
					var elchilds = tree.getElementsByTagName('taxonSubCount');
					var childs = elchilds.item(0).firstChild.nodeValue.trim();
					var elsearchStr = tree.getElementsByTagName('taxonSearchStr');
					var searchStr = elsearchStr.item(0).firstChild.nodeValue.trim();
					treeStr = treeStr + "<li class='closed' ";
					treeStr = treeStr + "id='li" + taxonId + "' value='0' ";
					if(childs > 0) {
						treeStr = treeStr + "onclick='checkTreeNode(this)' >";
					} else {
						treeStr = treeStr + ">";
					}
					treeStr = treeStr + "<span onclick='changeColor(this)' id='span";
					treeStr = treeStr + taxonId + "' value='0'>";
					treeStr = treeStr + "<a style='text-decoration:none' onclick=\"";
					treeStr = treeStr + "doSel(this,'" + searchStr + "')\" ";
					treeStr = treeStr + "id='a" + taxonId + "' >";
					treeStr = treeStr + taxonText;
					if(childs > 0) {
						treeStr = treeStr + " [" + childs + " Records]";
						treeStr = treeStr + "</a>";
						treeStr = treeStr + "</span>";	
						treeStr = treeStr +"<ul id='ul" + taxonId + "'></ul>";
					} else {
						treeStr = treeStr + "</a>";
						treeStr = treeStr + "</span>";
					}
					treeStr = treeStr + "</li>";
					
					var branches = $(treeStr).appendTo("#"+ulId);
                        //刷新树
			$("#black").treeview({
				add: branches
			});	 
	        	}
	        }
			
	        }
	     }
	    xmlHttp.open("POST",getTreeNodeUrl,true);
	    xmlHttp.send(null);
	}
	//树节点作为检索条件，传入字符串
	function doSel(curObj,selectStr){
		document.getElementById('treeTaxon').value = selectStr;
		if(document.getElementById('selectstr').value == '') {
			document.getElementById('selectstr').value = curObj.id;
		}else {
			if(document.getElementById('selectstr').value == curObj.id){
				document.getElementById('treeTaxon').value = "";
				document.getElementById('selectstr').value = '';
			}else{
				document.getElementById('selectstr').value = curObj.id;
			}
		}
	}
	
	//选中时候的颜色变化
	function changeColor(thisO){
		var taxId = document.getElementById('spanId').value;
		if(taxId.length > 0){
			document.getElementById(taxId).style.background="";
		}
		document.getElementById('spanId').value = thisO.id;
		document.getElementById(thisO.id).style.background="#D6DFF7";
		
		if(document.getElementById('color').value == '') {
			document.getElementById('color').value = thisO.id;
		}else {
			if(document.getElementById('color').value == thisO.id){
				thisO.style.background = "";
				document.getElementById('color').value = '';
			}else{
				document.getElementById('color').value = thisO.id;
			}
		}
	}
	//判断是否已经点过这个节点，防止不断的追加已经存在的节点
	function checkTreeNode(thisObj) {
		var liId = thisObj.id;
		var	doFlag = document.getElementById(liId).value;
		if(doFlag == '0') {
			getTreeNode(liId);
			document.getElementById(liId).value = '1';
		}
	}
</script>

<h3 class="section2" id="treeViewHref" style="width: 860px;">
	<img alt="" src="image/open.png" id="treeViewDtlButton" onclick="expansion('treeViewDtl','treeViewDtlButton');">Taxonomy Tree
</h3>

<div id="treeViewDtl" style="width:900px;overflow:scroll;height:300px;overflow:scroll;display: none;">
	<div id="main">
		<ul id="black" class="treeview-black">
			<bean:write property="data.treeString" name="SampleSearchForm" filter="false"/>
		</ul>
	</div>
</div>
<input type="hidden" id="selectstr" value="">
<input type="hidden" id="color" value="">
<html:hidden name="SampleSearchForm" property ="data.treeString" styleId="data.treeString"/>
<html:hidden property="data.treeTaxon" styleId="treeTaxon" name="SampleSearchForm"/>
<html:hidden property="data.spanId" styleId="spanId" name="SampleSearchForm"/>

后台的代码如下：

//业务逻辑
public ActionForward init(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws SystemException, BusinessException {
		getLog().info("TreeNodeAction::init begin");
		SampleSearchInData inData = new SampleSearchInData();
		SampleSearchOutData result = new SampleSearchOutData();
		StringBuffer reslutBuffer = new StringBuffer(
				"<?xml version=\"1.0\" encoding=\"SHIFT-JIS\"?>");
		String spanId = request.getParameter("taxonId");
		String taxonId = spanId.substring(2);
		inData.setTaxonId(taxonId);
                
		BaseBusiness getTreeListBusiness = BusinessFactory.createBusiness(SubTaxonBusiness.class);
		if (!"".equals(taxonId) && taxonId != null) {
                        //查找数据库的逻辑
			result = (SampleSearchOutData) getTreeListBusiness.execute(inData);
			reslutBuffer = formatResult(result.getTreeLineList() , reslutBuffer);
		}
		printXML(response, reslutBuffer);
		return null;
	}
        //拼成XMl格式
	private StringBuffer formatResult(List treeLineList , StringBuffer buffer) {
		buffer.append("<root>");
		for (int i = 0; i < treeLineList.size(); i++) {
			TaxonTempTree tt = (TaxonTempTree) treeLineList.get(i);
			buffer.append("<node>");
			buffer.append("<taxonID>");
			buffer.append(tt.getTaxonId());
			buffer.append("</taxonID>");
			buffer.append("<taxonText>");
			buffer.append(tt.getTaxonText());
			buffer.append("</taxonText>");
			buffer.append("<taxonSubCount>");
			buffer.append(tt.getChilds());
			buffer.append("</taxonSubCount>");
			buffer.append("<taxonSearchStr>");
			buffer.append(tt.getSearchStr());
			buffer.append("</taxonSearchStr>");
			buffer.append("</node>");
		}
		buffer.append("</root>");
		return buffer;
	}

	//写到前台的XML
	protected void printXML(HttpServletResponse response, StringBuffer sb)
			throws SystemException {
		setXmlResponse(response);
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			throw new SystemException("Ajax 错误", e);
		}
		out.write(sb.toString());
		out.close();
	}
	
	
	protected void setXmlResponse(HttpServletResponse response) {
		response.setContentType("text/xml; charset=Shift_JIS");
		response.setHeader("Cache-Control", "no-cache");	
		
	}

经过反复的测试，没有什么大问题。做项目就是要根据业务不断的琢磨和研究可行性方案。希望这篇文章能给大家一定的帮助。我会在这些天重构这些代码的，希望看出问题的朋友，不忘的点拨下我，我是菜鸟。