用ajax和JQuery TreeView 编一个动态的树形结构 - 结交天下有识之士~~~ - ITeye技术网站
最近在做一个项目，就是在老的版本上添加和修改功能。
技术支持：jdk1.4，struts1.0，ibatis2.0，PSQL，javascript，jquery。
我的做的一小部分是将一个表型结构的数据集合，变成一个树形结构的显示出来。经过调查JQuery TreeView可以实现。刚开始做的时候是以一种静态树显示出来。由于自己小组做的数据库的数据太少（拼成字符串340K），显示出来是没问题的。但是到了客户给的数据（拼成字符串12M）时就内存溢出，那个悲剧啊。后来只能重新调查，发现JQuery TreeView还是可以支持动态树的，但是按照网上所说的方法去做，怎么试也试不出来，郁闷 ；迫不得已，只能自己动手了。直接上代码吧。
&%@ page contentType="text/ 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 getTreeNodeUrl = 'treeSource.do?taxonId='+taxonId;
var ulId ='ul' + taxonId.substring(2);
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e){
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
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. 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)' &";
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 + taxonT
if(childs & 0) {
treeStr = treeStr + " [" + childs + " Records]";
treeStr = treeStr + "&/a&";
treeStr = treeStr + "&/span&";
treeStr = treeStr +"&ul id='ul" + taxonId + "'&&/ul&";
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 = selectS
if(document.getElementById('selectstr').value == '') {
document.getElementById('selectstr').value = curObj.
if(document.getElementById('selectstr').value == curObj.id){
document.getElementById('treeTaxon').value = "";
document.getElementById('selectstr').value = '';
document.getElementById('selectstr').value = curObj.
//选中时候的颜色变化
function changeColor(thisO){
var taxId = document.getElementById('spanId').
if(taxId.length & 0){
document.getElementById(taxId).style.background="";
document.getElementById('spanId').value = thisO.
document.getElementById(thisO.id).style.background="#D6DFF7";
if(document.getElementById('color').value == '') {
document.getElementById('color').value = thisO.
if(document.getElementById('color').value == thisO.id){
thisO.style.background = "";
document.getElementById('color').value = '';
document.getElementById('color').value = thisO.
//判断是否已经点过这个节点，防止不断的追加已经存在的节点
function checkTreeNode(thisObj) {
var liId = thisObj.
var doFlag = document.getElementById(liId).
if(doFlag == '0') {
getTreeNode(liId);
document.getElementById(liId).value = '1';
&h3 class="section2" id="treeViewHref" style="width: 860"&
&img alt="" src="image/open.png" id="treeViewDtlButton" onclick="expansion('treeViewDtl','treeViewDtlButton');"&Taxonomy Tree
&div id="treeViewDtl" style="width:900overflow:height:300overflow:display:"&
&div id="main"&
&ul id="black" class="treeview-black"&
&bean:write property="data.treeString" name="SampleSearchForm" filter="false"/&
&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);
//拼成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&");
//写到前台的XML
protected void printXML(HttpServletResponse response, StringBuffer sb)
throws SystemException {
setXmlResponse(response);
PrintWriter out =
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/ charset=Shift_JIS");
response.setHeader("Cache-Control", "no-cache");
经过反复的测试，没有什么大问题。做项目就是要根据业务不断的琢磨和研究可行性方案。希望这篇文章能给大家一定的帮助。我会在这些天重构这些代码的，希望看出问题的朋友，不忘的点拨下我，我是菜鸟。
king130520
浏览: 13485 次
来自: 杭州
如果是实习生的身份进入公司的话，800在杭州这是本科生的一般标 ...
alanjaver 写道楼主在哪混，我也是在杭州的应届生，交个 ...
楼主在哪混，我也是在杭州的应届生，交个朋友如何
5年后我娶你 写道我个人觉得有没有学习的机会和发展的空间了，我 ...
建议卸载后重新安装一下不过卸载时一定要卸载完全注册表的东西要一 ...juery treeview 动态加载（实现） -
- ITeye技术网站
最近一直在做一个树的动态加载，可在网上找了半天也没找到太合适的答案，不过有一个写的还是不错的，只不过在第一次加载的时候是完全加载树，而不是动态实现的，今天本想引用一下，再他的基础上修改的，但没有找到。
本树的说明如下：
1、树实现动态加载
2、要传递一个按钮的参数，比如是单选，还是复选
3、只有是叶子节点才有按钮出现
如果有需要可以在此基础上进行修改，我的并不完善，只是实现了功能。
用的struts1.2框架
首先、从页面开始写: html代码如下：
&ul id="back"&
&/ul&
树将在id为back的位置进行展示。
&& js代码如下：
&script type="text/javascript"&
$(document).ready(function(){
& //初始化树
& $("#back").treeview({
animated: "fast",
collapsed: true,
unique: true,
persist: "location",
&&&&&&& url:"&%=url%&"
& });
&&&&&&&&&&&&&&&& });
&/script&
这个是展示树的页面,进入这个页面的时候会自动加载这个treeview,调用url地址,& url的参数可以接收过来，demo.do?method=findChildren&viewBox=1这地方的viewBox代表按钮的是单选还是复选。
在此页面要要引入jquery& treeview ,可以参照juerytreeview的例子async.html
其次、配置struts 1.2action
&action path="/demoTreeAction" scope="request" parameter="method" type="DemoTreeAction"/&
最后 actioin中代码如下：
public ActionForward findChildren(ActionMapping mapping, ActionForm form,
&&&&&&&&&&& HttpServletRequest request, HttpServletResponse response)
&&&&&&&&&&& throws Exception {
&&&&&&&&&&& //此处动态加载要设置的头信息
&&&&&&&&&&& response.setHeader("Cache-Control", "no-cache");
&&&&&&&&&&& response.setContentType("text/charset=UTF-8");
&&&&&&&&&&& request.setCharacterEncoding("utf-8");
&&&&&&&&&&& PrintWriter out = response.getWriter();
&&&&&&&&&&& String viewBox = request.getParameter("viewBox");
&&&&&&&&&&& String root = request.getParameter("root");
&&&&&&&&&&& if("source".equals(root)){
&&&&&&&&&&&&&&& root="parent";
&&&&&&&&&&& }
&&&&&&&&&&& String output= getNode(root,viewBox);
&&&&&&&&&&& out.write(output);
&&&&&&&&&&& out.flush();
&&&&&&&&&&& out.close();
&&&&&&&&&&&
&&& }
//以下代码为业务代码，用来查询子节点，生成json格式数据,具体的json格式请参
//考treeview例子中的 source.html,这里用了spring服务注入，DemoVo 为是javaBean 有三个字段& 其中 根据 code name 还有父节点 parent
& private String getNode(String code,String viewBox) throws Exception{
&&&&&&&&&&& StringBuffer sb = new StringBuffer();
&&&&&&&&&&& sb.append("[");
&&&&&&&&&&& List&DemoVo& temp =
&&&&&&&&&&& if(demoService.hasSubItem(code)){//有孩子执行
&&&&&&&&&&&&&&& temp = demoService.findChildrenByParent(code);//根据code查询其孩子
&&&&&&&&&&&&&&& int j=0;
&&&&&&&&&&&&&& for (int i = 0; i & temp.size(); i++,j++) {
&&&&&&&&&&&&&&&&&& if(j&0){
&&&&&&&&&&&&&&&&&&&&&& sb.append(",");
&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&& sb.append(" {");
&&&&&&&&&&&&&&&&&&& DemoVo item = (DemoVo)temp.get(i);
&&&&&&&&&&&&&&&&&&& if(demoService.hasSubItem(item.getCode())){//有孩子
&&&&&&&&&&&&&&&&&&&&&&& sb.append("& \"text\": \""+item.getName()+"\""); //这里是显示的名称
&&&&&&&&&&&&&&&&&&&&&&& sb.append(",");
&&&&&&&&&&&&&&&&&&&&&&& sb.append(" \"hasChildren\": true");& //设为true预留会显示+号
&&&&&&&&&&&&&&&&&&& }else{//叶子节点 显示按钮
&&&&&&&&&&&&&&&&&&&&&&& sb.append("& \"text\": ");
&&&&&&&&&&&&&&&&&&&&&&& if("1".equals(viewBox)){
&&&&&&&&&&&&&&&&&&&&&&&&&&& sb.append("\"&input type='checkbox' value='");
&&&&&&&&&&&&&&&&&&&&&&& }else{
&&&&&&&&&&&&&&&&&&&&&&&&&&& sb.append("\"&input type='radio' name='s' value='");
&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&& sb.append(item.getCode());
&&&&&&&&&&&&&&&&&&&&&&& sb.append("' /&");
&&&&&&&&&&&&&&&&&&&&&&& sb.append(item.getName());
&&&&&&&&&&&&&&&&&&&&&&& sb.append("\"");
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&& sb.append(",");
&&&&&&&&&&&&&&&&&&& sb.append("& \"expanded\": false ");
&&&&&&&&&&&&&&&&&&& sb.append(",");
&&&&&&&&&&&&&&&&&&& sb.append(" \"id\": \""+item.getCode()+"\"");//给&li&添加id此处为code在树中唯一，以后点击节点动态加载时根据此rot=id的值进行查询
&&&&&&&&&&&&&&&&&&& sb.append(" }");&
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&&&&&& sb.append("]");
&&& return sb.toString();
}
& javaBean如下：
& public class DemoVo {
&&& private S& //在数据库中唯一
&&& private S
&&& private S //父节点就是code
&& //setter getter 省略
}
总结：简单说明一下，treeView 在首次访问的时候会传参数 root 默认值为source,此代码的跟节点，为parent
在首次访问url后，查询到一级节点，此url被存起来了，再次点击节点，url中多了root参数，
其值根据点击的&li&中的id而变，于是便动态加载
本人邮箱
jinjingxiang
浏览: 14112 次
来自: 北京
你用过了是吗，我现在有个问题解决不了想要沟通一下。第六步 登录 ...
不错，支持，帮我解决了一个问题！2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2011年9月 总版技术专家分月排行榜第一2011年8月 总版技术专家分月排行榜第一2011年7月 总版技术专家分月排行榜第一2011年6月 总版技术专家分月排行榜第一2011年5月 总版技术专家分月排行榜第一2011年4月 总版技术专家分月排行榜第一
2011年3月 总版技术专家分月排行榜第二2011年2月 总版技术专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。Javascript得到TreeView被选中的所有节点ID - 白亚伟 - 博客园
随笔 - 44, 文章 - 3, 评论 - 41, 引用 - 3
&&&&&&&&function&GetCheckedNode()&&&&&&&&{&&&&&&&&&&&&var&treeView=document.getElementById('&%=&treeViewSource.ClientID&%&');&&&&&&&&&&&&var&children=treeView.getChildren();&&&&&&&&&&&&var&checkedIds=GetCheckedNodeIds(children[<span style="color: #]);&&&&&&&&&&&&return&checkedIds.substr(<span style="color: #,checkedIds.length);&&&&&&&&}&&&&&&&&&&&&&&&&function&GetCheckedNodeIds(node)&&&&&&&&{&&&&&&&&&&&&var&ids='';&&&&&&&&&&&&if(node.getAttribute("checked")==true)&&&&&&&&&&&&{&&&&&&&&&&&&&&&&ids+=','+node.getAttribute("ID");&&&&&&&&&&&&}&&&&&&&&&&&&else&&&&&&&&&&&&{&&&&&&&&&&&&&&&&var&childNodes=node.getChildren();&&&&&&&&&&&&&&&&var&childCount=childNodes.&&&&&&&&&&&&&&&&if(childNodes.length&<span style="color: #)&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&for(var&i=<span style="color: #;i&childCi++)&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&ids+=GetCheckedNodeIds(childNodes[i]);&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&}&&&&&&&&&&&&}&&&&&&&&&&&&return&&&&&&&&&}注：treeViewSource是TreeView控件。被选中的意思是节点前的CheckBox被选中(checked)若当前节点被选中，则不遍历其子节点。最终返回选中节点ID用逗号分隔的字符串。