最近在做一个项目，就是在老的版本上添加和修改功能。
技术支持：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");
}
经过反复的测试，没有什么大问题。做项目就是要根据业务不断的琢磨和研究可行性方案。希望这篇文章能给大家一定的帮助。我会在这些天重构这些代码的，希望看出问题的朋友，不忘的点拨下我，我是菜鸟。
分享到：
相关推荐
BootstrapTreeView 是一个基于流行的前端框架 Bootstrap 的树形结构插件，它允许开发者在网页上创建交互式的、可自定义的树形视图。这个插件主要用于数据组织和展示，常见于网站导航、文件目录结构、组织架构或者...
在本文中，我们将深入探讨如何使用jQuery和treeview插件创建树形结构，这对于网页界面的组织和导航至关重要。首先，我们需要了解jQuery库和treeview插件的基本概念。 jQuery是一个流行的JavaScript库，它简化了HTML...
5. **处理异步响应**：jQuery Treeview会自动处理返回的数据，将其转化为树形结构。但你需要确保服务器返回的数据格式与jQuery Treeview期望的一致。通常，每个节点应包含`text`（显示的文本）、`href`（链接）以及...
《jQuery Treeview 演示详解》 ...通过理解并实践上述步骤，你可以根据实际需求创建各种复杂的树形结构，从而提升用户体验。在实际项目中，还可以结合Ajax实现动态加载，进一步增强交互性和功能。
`jQuery Treeview` 是一个流行的JavaScript插件，用于将HTML列表转换...通过与后台数据的交互，它可以动态地加载和更新树形结构，提供用户友好的体验。结合提供的文件，我们可以深入学习如何在实际项目中运用这个插件。
在网页开发中，jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得DOM操作、事件处理、动画设计以及Ajax交互变得更加便捷。而jQuery的TreeView插件则是用于创建可交互的树形视图，这在...
在网页开发中，jQuery Tree 插件是一种常用的工具，用于展示数据的树形结构，通常用于文件系统、组织结构或层级关系的展现。这里我们列举了12款不同的jQuery Tree插件，它们各自具有独特的特性和优势。 1. **jQuery...
jQuery Treeview.js是基于jQuery框架的一个轻量级插件，它能够将HTML列表转换成具有折叠和展开功能的树形结构。这个插件以其简单易用、高度可定制和良好的浏览器兼容性而受到开发者们的青睐。通过使用CSS样式和...
3. **jQuery插件**：有许多jQuery插件，如jQuery UI的Treeview，提供了丰富的树形结构功能，如展开/折叠、拖放等。这些插件简化了开发过程，但可能需要一定的学习成本。 4. **Ajax异步加载**：在大数据量的树形结构...
在网页应用中，TreeView插件能够以树形结构呈现数据，用户可以通过展开和折叠节点来探索内容。异步加载树则是在用户需要时才从服务器获取数据，而不是一次性加载所有数据，这极大地优化了用户体验，特别是当数据量...
在IT行业中，特别是Web开发领域，`jQuery`是一款非常流行的JavaScript...总的来说，`jQuery UI Treeview`是一个强大且灵活的工具，可以帮助开发者构建出美观且易用的树形结构界面，尤其适用于需要展示层次关系的场景。
总的来说，jQuery树形结构Demo为开发者提供了一个快速搭建和定制交互式树形控件的起点。通过学习和理解这个Demo，开发者可以进一步提升自己的前端技能，更好地应对各种Web应用中的数据组织和展示挑战。
"jQuery + Servlet + Ajax 展示XML树形结构"是一个典型的Web应用程序开发场景，它涉及到前端的交互、后端的数据处理以及异步通信技术。下面将详细解析这个主题中的关键知识点。 首先，**jQuery** 是一个流行的...
jQuery Treeview.js 是一款功能强大的JavaScript库，用于将HTML列表转换为可交互的树形结构。这个插件基于流行的jQuery框架，为用户提供了一种简便的方式来展示层次化的数据，如目录、菜单或网站导航。在版本v1.4中...
当需要更复杂的交互功能时，可以使用JavaScript库，如jQuery UI的Treeview插件，或者第三方库如AngularJS、React等来实现动态树形结构。这些库提供了丰富的API和事件处理，可以轻松实现节点的增删改查、展开折叠、...
在这个案例中，jQuery用于监听用户的搜索输入，以及对树形结构进行筛选和更新。 2. **Bootstrap**：Bootstrap是Twitter开发的一个开源的前端框架，用于快速构建响应式和移动优先的Web应用。其提供了一套预定义的CSS...
在"关于treeview.js的树形结构的小例子"中，我们将探讨如何使用`treeview.js`来构建和操作树形结构。首先，你需要在HTML文件中引入`treeview.js`库的CSS和JS文件。通常，这可以通过在`<head>`标签内添加以下代码完成...
jQuery Treeview是一个流行的JavaScript库，用于将HTML列表转换为可交互的树形视图，它使得数据呈现层次结构，常用于文件系统、目录导航或菜单等。本实例着重讲解如何结合Ajax实现动态加载数据，利用PHP后端提供数据...
Bootstrap Treeview 是一个基于 Bootstrap 的 jQuery 插件，用于显示树形结构数据。该插件支持多级列表树结构，能够以简单和优雅的方式显示继承树结构，如视图树、列表树等。 在本文中，我们将使用 Bootstrap ...
它通过CSS样式和JavaScript功能将HTML结构转化为具有折叠/展开效果的树形结构。要使用jQuery Treeview，你需要引入jQuery库以及Treeview的JavaScript和CSS文件到你的HTML页面中。例如： ```html ...