EasyUI中的tree用法介紹
更新時間：2011年11月01日 19:11:44 作者：
不知不覺10月都結(jié)束了，又要到年底了?？纯醋约荷洗螌戇^的文章后，已經(jīng)2個月都沒寫東西了
真的是太忙了，本應該有好多東西可以寫，但是沒什么閑時間，每次想到寫的時候，來點事就又給忘了。10月最后一天了，在忙也得把這篇文章寫完，不然又得多一個空白月了。
這是之前帶領(lǐng)成員開發(fā)一個小模塊功能的時候，需要用到彈出窗口加載樹狀級聯(lián)單位選擇，最后決定用采用jQuery+EasyUI插件進行開發(fā)。但是在使用EasyUI中tree的插件時，碰到了不少麻煩。為了提供彈出樹的顯示速度，就采用異步加載數(shù)節(jié)點值，首先先加載根節(jié)點，然后根據(jù)點擊的節(jié)點展開加載子節(jié)點。
往往結(jié)果和預期的都不一樣，困惑了幾天，展開后子節(jié)點是動態(tài)加載了，但是收縮后無法清空之前填充的數(shù)據(jù)；第二次在展開時，子節(jié)點又被重復加載了一遍，造成了數(shù)據(jù)重復顯示，并沒有提供清除子節(jié)點的方法。想盡了各種辦法來解決這個問題，只能換另一種形式加載子節(jié)點的值了，把每一個節(jié)點值保存起來，判斷是否已經(jīng)存在，存在就不在去加載。
兩種方法見實例：
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é)點值-------------
// $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString());
//------------第二種方法：Ajax方法返回子節(jié)點Json值，使用append方法加載子節(jié)點
$.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('提示', '查詢語句出錯', '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;
}
//全部展開
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é)點
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é)點
function remove() {
var node = $('#basetree').tree('getSelected');
$('#basetree').tree('remove',node.target);
}
頁面getTreeNode.ashx返回樹節(jié)點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 = "出錯";
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}
關(guān)鍵性的代碼都已經(jīng)在上面了，目前也就只能想到這種辦法來解決了，有時間的話可以給tree擴展一下，添加一個清除子節(jié)點的方法，這樣應該實現(xiàn)起來會更容易方便。
小弟在此獻丑了，不知道各位專家、同仁有沒有遇到類似的問題，或者有其它更好的解決辦法，歡迎在這交流。
同時也感謝各位抽出寶貴的時間閱讀文章，讓我們共同進步，共同分享交流，在節(jié)省他人的時間就是提高自己~~~
作者：ZHF
這是之前帶領(lǐng)成員開發(fā)一個小模塊功能的時候，需要用到彈出窗口加載樹狀級聯(lián)單位選擇，最后決定用采用jQuery+EasyUI插件進行開發(fā)。但是在使用EasyUI中tree的插件時，碰到了不少麻煩。為了提供彈出樹的顯示速度，就采用異步加載數(shù)節(jié)點值，首先先加載根節(jié)點，然后根據(jù)點擊的節(jié)點展開加載子節(jié)點。
往往結(jié)果和預期的都不一樣，困惑了幾天，展開后子節(jié)點是動態(tài)加載了，但是收縮后無法清空之前填充的數(shù)據(jù)；第二次在展開時，子節(jié)點又被重復加載了一遍，造成了數(shù)據(jù)重復顯示，并沒有提供清除子節(jié)點的方法。想盡了各種辦法來解決這個問題，只能換另一種形式加載子節(jié)點的值了，把每一個節(jié)點值保存起來，判斷是否已經(jīng)存在，存在就不在去加載。
兩種方法見實例：
復制代碼 代碼如下:
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é)點值-------------
// $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString());
//------------第二種方法：Ajax方法返回子節(jié)點Json值，使用append方法加載子節(jié)點
$.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('提示', '查詢語句出錯', '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;
}
//全部展開
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é)點
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é)點
function remove() {
var node = $('#basetree').tree('getSelected');
$('#basetree').tree('remove',node.target);
}
頁面getTreeNode.ashx返回樹節(jié)點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 = "出錯";
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}
關(guān)鍵性的代碼都已經(jīng)在上面了，目前也就只能想到這種辦法來解決了，有時間的話可以給tree擴展一下，添加一個清除子節(jié)點的方法，這樣應該實現(xiàn)起來會更容易方便。
小弟在此獻丑了，不知道各位專家、同仁有沒有遇到類似的問題，或者有其它更好的解決辦法，歡迎在這交流。
同時也感謝各位抽出寶貴的時間閱讀文章，讓我們共同進步，共同分享交流，在節(jié)省他人的時間就是提高自己~~~
作者：ZHF
相關(guān)文章
本文為大家介紹下使用JQuery寫的動態(tài)樹，具體實現(xiàn)如下，感興趣的朋友可以學習下2013-07-07
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協(xié)議、端口）的資源。2011-06-06
這篇文章主要介紹了Jquery實現(xiàn)自定義tooltip的方法,需要的朋友可以參考下2014-02-02
Visual Studio中的jQuery智能提示設置方法，喜歡用vs2008開發(fā)的朋友可以參考下。2010-03-03
基于jquery實現(xiàn)可定制的web在線富文本編輯器附源碼下載
UEditor的功能非常強大，官方已配備了php,asp,asp.net,java等語言的上傳程序，拿來就可以使用，當然ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項目的不同需求2015-11-11
這篇文章主要介紹了jQuery簡單實現(xiàn)MD5加密的方法,基于jquery.md5.js插件實現(xiàn)md5加密功能,非常簡單實用,需要的朋友可以參考下2017-03-03
jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題，通過第三方的json2.js做到兼容，需要的朋友可以參考下。2016-05-05
本篇文章主要介紹了jquery表單驗證框架提供的身份證驗證方法的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這里給大家分享一段個人覺著非常實用也經(jīng)常用于項目中的代碼，本代碼基于jQuery實現(xiàn)了文本框縮放以及上下移動功能，給需要的網(wǎng)友們參考下吧2014-11-11
jQuery的開發(fā)速度很快，幾乎每半年一個大版本，每兩個月一個小版本。每個版本都會引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個新功能----deferred對象。2011-08-08