本文記錄的是帶領(lǐng)成員開(kāi)發(fā)一個(gè)小模塊功能的時(shí)候，需要用到彈出窗口加載樹(shù)狀級(jí)聯(lián)單位選擇，最后決定用采用jQuery+EasyUI插件進(jìn)行開(kāi)發(fā)。但是在使用EasyUI中tree的插件時(shí)，碰到了不少麻煩。為了提供彈出樹(shù)的顯示速度，就采用異步加載數(shù)節(jié)點(diǎn)值，首先先加載根節(jié)點(diǎn)，然后根據(jù)點(diǎn)擊的節(jié)點(diǎn)展開(kāi)加載子節(jié)點(diǎn)。
往往結(jié)果和預(yù)期的都不一樣，困惑了幾天，展開(kāi)后子節(jié)點(diǎn)是動(dòng)態(tài)加載了，但是收縮后無(wú)法清空之前填充的數(shù)據(jù)；第二次在展開(kāi)時(shí)，子節(jié)點(diǎn)又被重復(fù)加載了一遍，造成了數(shù)據(jù)重復(fù)顯示，并沒(méi)有提供清除子節(jié)點(diǎn)的方法。想盡了各種辦法來(lái)解決這個(gè)問(wèn)題，只能換另一種形式加載子節(jié)點(diǎn)的值了，把每一個(gè)節(jié)點(diǎn)值保存起來(lái)，判斷是否已經(jīng)存在，存在就不在去加載。
兩種方法見(jiàn)實(shí)例：
var treeTitle = '選擇列表';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var rows;
var noinf=0;
$(function() {
$('#treewindow').window({
title: treeTitle,
width: 400,
height: 400,
modal: true,
shadow: false,
closed: true,
resizable: false,
maximizable: false,
minimizable: false,
collapsible: false
});
});
function treeWindowOpen(name,rowIndx) {
$('#treewindow').window('open');
nodekeep="";
nodeExp=false;
rows=rowIndx.toString();
$('#basetree').tree({
checkbox: true,
animate: true,
url: treeUrl+"&coln="+escape(name.toString()),
cascadeCheck: true,
onlyLeafCheck: false,
onBeforeExpand: function(node, param) {
//------------第一種方法：異步加載子節(jié)點(diǎn)值-------------
// $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString());
//------------第二種方法：Ajax方法返回子節(jié)點(diǎn)Json值，使用append方法加載子節(jié)點(diǎn)
$.ajax({
type: "POST",
url: "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString())+"&casn="+escape(node.attributes.cas.toString()),
cache: false,
async: false,
dataType: "json",
success: function(data) {
if(nodekeep.indexOf(node.id)==-1)
{
append(data, node);
nodeExp = true;
}
}
});
$("#radCollapse").removeAttr("checked");
},
onLoadError:function(Error)
{
$.messager.alert('提示', '查詢語(yǔ)句出錯(cuò)', 'error');
if(nodeExp==false)
{
$("#basetree").children().remove();
}
},
onLoadSuccess:function(success)
{
var child=$("#basetree").children().length;
noinf++;
if(child==0&&noinf>1)
{
$.messager.alert('提示', '數(shù)據(jù)不存在', 'Info');
}
}
});
}
function treeWindowClose() {
$('#treewindow').window('close');
nodekeep="";
nodekeep=false;
}
function treeWindowSubmit() {
var nodes = $('#basetree').tree('getChecked');
var info = '';
if (nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
if (info != '') { info += ','; }
info += nodes[i].text;
}
//alert(JSON.stringify(nodes));
}
else {
var node = $('#basetree').tree('getSelected');
if (node != null) {
info = node.text;
}
}
$("#"+rows).val(info);
$('#treewindow').window('close');
nodekeep="";
nodeExp=false;
}
//全部展開(kāi)
function collapseAll() {
$("#radCollapse").attr("checked", "checked");
var node = $('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('collapseAll', node.target);
} else {
$('#basetree').tree('collapseAll');
}
}
//全部收縮
function expandAll() {
var node = $('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('expandAll', node.target);
} else {
$('#basetree').tree('expandAll');
}
}
//增加子節(jié)點(diǎn)
function append(datas,cnode) {
var node = cnode;
$('#basetree').tree('append', {
parent: node.target,
data: datas
});
nodekeep+=","+node.id;
}
//重新加載
function reload() {
var node = $('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('reload', node.target);
} else {
$('#basetree').tree('reload');
}
}
//刪除子節(jié)點(diǎn)
function remove() {
var node = $('#basetree').tree('getSelected');
$('#basetree').tree('remove',node.target);
}
頁(yè)面getTreeNode.ashx返回樹(shù)節(jié)點(diǎn)JSON格式數(shù)據(jù)：
<%@ WebHandler Language="C#" Class="getTreeNode" %>
using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
public class getTreeNode : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
DataTable dt = (DataTable)context.Session["viewmaintain"];
string parentId = string.Empty;
string resultStr = string.Empty;
string attributes = string.Empty;
string colName = string.Empty;
string sql = string.Empty;
string Casname = string.Empty;
bool colt = false;
string icon = "icon-profile";
if (!string.IsNullOrEmpty(context.Request.QueryString["pid"]))
{
parentId = context.Request.QueryString["pid"].ToString();
}
if ((!string.IsNullOrEmpty(context.Request.QueryString["coln"])) && (string.IsNullOrEmpty(context.Request.QueryString["casn"])))
{
colName = HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString());
if (dt != null)
{
bool pt = true;
while (pt)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Casname = dt.Rows[i]["view_colname"].ToString();
if (dt.Rows[i]["view_colname"].ToString() == colName)
{
if (dt.Rows[i]["view_cas"].ToString() != null&&dt.Rows[i]["view_cas"].ToString() !="")
{
colName = dt.Rows[i]["view_cas"].ToString();
}
else
{
colt = true;
sql = dt.Rows[i]["view_sql"].ToString();
pt = false;
}
break;
}
}
}
}
}
if ((!string.IsNullOrEmpty(context.Request.QueryString["casn"])) && (!string.IsNullOrEmpty(context.Request.QueryString["coln"])))
{
string casnName = HttpUtility.UrlDecode(context.Request.QueryString["casn"].ToString());
colName = HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString());
if (dt != null)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Casname = dt.Rows[i]["view_colname"].ToString();
if (dt.Rows[i]["view_cas"].ToString() == casnName && casnName != colName)
{
colt = true;
sql = dt.Rows[i]["view_sql"].ToString();
break;
}
}
}
}
try
{
if (parentId != "" && colt == true)
{
//此處省略得到數(shù)據(jù)列表的代碼
List<TreeInfo> ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
resultStr = "";
resultStr += "[";
if (ltree.Count > 0)
{
foreach (TreeInfo item in ltree)
{
attributes = "";
attributes += "{\"cas\":\"" + Casname;
attributes += "\",\"val\":\"" + item._text + "\"}";
resultStr += "{";
resultStr += string.Format("\"id\": \"{0}\", \"text\": \"{1}\", \"iconCls\": \"{2}\", \"attributes\": {3}, \"state\": \"closed\"", item._id, item._text, icon, attributes);
resultStr += "},";
}
resultStr = resultStr.Substring(0, resultStr.Length - 1);
}
resultStr += "]";
}
else
{
resultStr = "[]";
}
}
catch (Exception ex)
{
resultStr = "出錯(cuò)";
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}
關(guān)鍵性的代碼都已經(jīng)在上面了，目前也就只能想到這種辦法來(lái)解決了，有時(shí)間的話可以給tree擴(kuò)展一下，添加一個(gè)清除子節(jié)點(diǎn)的方法，這樣應(yīng)該實(shí)現(xiàn)起來(lái)會(huì)更容易方便。
小弟在此獻(xiàn)丑了，不知道各位專家、同仁有沒(méi)有遇到類似的問(wèn)題，或者有其它更好的解決辦法，歡迎在這交流。
