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

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


<%@ 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");	

	}


经过反复的测试，没有什么大问题。做项目就是要根据业务不断的琢磨和研究可行性方案。希望这篇文章能给大家一定的帮助。我会在这些天重构这些代码的，希望看出问题的朋友，不忘的点拨下我，我是菜鸟。
king3371058
关注
jquery插件TreeViewt实现动态树状结构
Oranq的博客
03-31 3694
html> html lang="en"> head> meta charset="UTF-8"> title>一款jquery插件TreeViewt实现动态树状结构title> script src="http://code.jquery.com/jquery-latest.js">script> link rel="stylesheet" href="css/
jqueryTreeTable+ajax(构建树形表格)
05-28
jqery.treeTable + ajax + mysql数据库， ssm架构构建树形表格
jQuery和ajax实现树状结构
03-26
jQuery和ajax实现树状结构 可以直接导入MyEclipse运行
jquery ajax json4 treeview动态加载
xujunPro的博客
12-09 267
[code="java"] [/code] 动态加载的时候，只会在第一次展开的时候发送服务器，再次展开是不发送的，类似jquey的one事件处理。 treeview每次请求都是get请求，会自动带一个"root"的url参数，第一次是"source"。 以后的话都以li的id作为参数,即你在json数据中设置的"id"值。如果json中某个bool值的项目你不需要，就不...
jQuery第六课：实现一个Ajax的TreeView
weixin_30697239的博客
05-08 95
TreeView是asp.net自带的控件，不过自带的控件在灵活性上有诸多限制。在jQuery的帮助下，自己实现一个TreeView也不困难。本文是前几篇文章所讲内容的一个综合演练。最终实现的效果是一个目录文件查看器，如图所示： 其原理是，当用户单击一个目录的时候，将这个目录的路径发送给服务器端，服务器端返回这个目录中的文件和目录信息。在服务器端，定义一个如下的类来表示要传递的文件信息： ...
【JavaScript源代码】jQuery treeview树形结构应用.docx
12-29
在本文中，我们将深入探讨如何使用jQuery和treeview插件创建树形结构，这对于网页界面的组织和导航至关重要。首先，我们需要了解jQuery库和treeview插件的基本概念。 jQuery是一个流行的JavaScript库，它简化了HTML...
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
10-21
在本文中，我们将深入探讨如何在基于MVC5和Bootstrap的Web应用中使用jQuery TreeView树形控件，特别是如何支持JSON字符串和List集合作为数据源。jQuery TreeView控件是一种用户界面元素，用于以层次结构展示数据，常...
BootstrapTreeView树形结构
08-11
BootstrapTreeView 是一个基于流行的前端框架 Bootstrap 的树形结构插件，它允许开发者在网页上创建交互式的、可自定义的树形视图。这个插件主要用于数据组织和展示，常见于网站导航、文件目录结构、组织架构或者...
一个基于jQuery的简单树形菜单
11-20
此外，对于大型或动态生成的树形菜单，可以考虑使用插件如`jstree`或`jQuery UI Treeview`。这些插件提供了丰富的功能，如多选、拖放、搜索等，同时提供了易于使用的API和配置选项。 总结来说，创建基于jQuery的...
bootstrap treeview可搜索下拉树形
09-17
在这个案例中，jQuery用于监听用户的搜索输入，以及对树形结构进行筛选和更新。 2. **Bootstrap**：Bootstrap是Twitter开发的一个开源的前端框架，用于快速构建响应式和移动优先的Web应用。其提供了一套预定义的CSS...
jQuery ajax动态树控TreeView菜单Access版.rar
07-09
treeViewClientControl开源代码，使用了jquery与ASP.NET的配合，采用Access数据库，实现了即时加载的动态TreeView控件，完美展现了ajax操作之美。同时，通过控制程序，你将能实现全部收缩、全部展开、增加、删除、修改节点的功能，无刷新操作这些选项，特别是对于初级Ajax的朋友，本例尤其适合您。
动态树的管理程序(基于jQuery Treeview实现)
09-20
在项目中经常会用到tree，例如分类，用户组等等。 在实现的时候也会有很多的方法，例如可以用extjs，jquery treeview等一些js开发包。 但是在开发的时候我种想找个例子来参考下，发现有很多这样的例子，包括extjs和jquery treeview的官方也有，但结合java后台实现的不多。 这里我做了一个例子，是一个完整的应用例子，可以动态的对这棵树进行维护
使用递归方法动态生成TreeView
11-06
使用递归方法动态生成TreeView！,动态更改节点显示的图片！
jQuery 学习第六课 实现一个Ajax的TreeView
10-29
TreeView是asp.net自带的控件，不过自带的控件在灵活性上有诸多限制。在jQuery的帮助下，自己实现一个TreeView也不困难。本文是前几篇文章所讲内容的一个综合演练。
TreeView控件ajax操作实例
06-29
使用jQuery以及它的ajax方法直接操作asp.net 2.0 中的TreeView控件，具体说明请看http://blog.csdn.net/luq885
基于jquery-treeview的动态菜单实现
Maze -- life is amazing
12-25 413
参考：https://www.cnblogs.com/franknihao/p/7544842.html
jquery 树结构 ajax,一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)
weixin_36052776的博客
08-06 215
一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)复制代码 代码如下:using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data...
jquery treeview ajax
lrenwang的专栏
05-21 1920
这个效果是jquery的插件 jquery.treeview 带有ajax功能, 效果非常棒, 和大家共享下, 先上图还有好多样式,等以后我会慢慢整理出来,持续更新中 呵呵官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-treeview/html代码调用超级方便, 只要加载相关js,css 一个语句就行了test.html
jQuery Ajax 全解析
我是菜鸟
06-04 511
本文地址: jQuery Ajax 全解析本文作者：QLeelulu转载请标明出处！jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到j
jQuery treeview 实现树形结构详解
“jQuery treeview树形结构应用”文档主要介绍了如何使用jQuery的treeview插件来创建和应用树形结构。在网页开发中，树形结构常用于展示层级关系的数据，例如目录结构、组织架构等。jQuery treeview 是一个流行的库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值