搜尋
首頁web前端js教程EasyUI中的tree用法介绍_jquery

真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了。10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了。

  这是之前带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时,碰到了不少麻烦。为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点。

  往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数据;第二次在展开时,子节点又被重复加载了一遍,造成了数据重复显示,并没有提供清除子节点的方法。想尽了各种办法来解决这个问题,只能换另一种形式加载子节点的值了,把每一个节点值保存起来,判断是否已经存在,存在就不在去加载。

  两种方法见实例:

复制代码 代码如下:

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) {
//------------第一种方法:异步加载子节点值-------------
// $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString());

//------------第二种方法:Ajax方法返回子节点Json值,使用append方法加载子节点
$.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('提示', '数据不存在', '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 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');
}
}
//增加子节点
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');
}
}
//删除子节点
function remove() {
var node = $('#basetree').tree('getSelected');
$('#basetree').tree('remove',node.target);
}

页面getTreeNode.ashx返回树节点JSON格式数据:
复制代码 代码如下:


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 {
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 {
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)
{
//此处省略得到数据列表的代码
List 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;
}
}
}

关键性的代码都已经在上面了,目前也就只能想到这种办法来解决了,有时间的话可以给tree扩展一下,添加一个清除子节点的方法,这样应该实现起来会更容易方便。

  小弟在此献丑了,不知道各位专家、同仁有没有遇到类似的问题,或者有其它更好的解决办法,欢迎在这交流。

  同时也感谢各位抽出宝贵的时间阅读文章,让我们共同进步,共同分享交流,在节省他人的时间就是提高自己~~~

作者:ZHF  
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
easyui是jquery插件吗easyui是jquery插件吗Jul 05, 2022 pm 06:08 PM

easyui是jquery插件。easyui是基于JQuery的一个前台ui界面的插件,用于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。easyui是个完美支持HTML5网页的框架,可以帮助开发者节省网页开发的时间和规模。

使用tree生成文件目录树进行展示使用tree生成文件目录树进行展示Mar 01, 2024 pm 05:46 PM

tree是一个命令行工具,它以树状格式递归地列出一个目录的内容,使得所有的目录、子目录和文件以分层的方式列出,从而直观地展示文件和文件夹的组织结构。以下是tree在Windows和Linux系统下的安装和使用方法Linux下tree的安装与使用Linux下安装tree:aptupdate&&aptinstalltree以下是tree命令的常用方式。#显示指定路径下的目录树tree/d/temp#限制最大的展示深度tree-L3#只显示目录不显示文件tree-d#显示包括隐藏的文件和目录tr

使用PHP和jQuery EasyUI开发一个高效的后台管理系统使用PHP和jQuery EasyUI开发一个高效的后台管理系统Jun 27, 2023 pm 01:21 PM

随着互联网的发展,越来越多的企业需要开发一个高效的后台管理系统来管理和处理数据,为企业的发展提供有力的支持。在这样的背景下,PHP和jQueryEasyUI成为了非常流行的开发技术。PHP是一种广泛应用的服务器端脚本语言,具有开源、跨平台、易学易用等优点,并且拥有丰富的函数库和大量的开源框架,可以快速地搭建一个高效的后台管理系统。而jQueryEasyU

探索jQuery EasyUI的网页设计灵感和技巧探索jQuery EasyUI的网页设计灵感和技巧Feb 25, 2024 pm 09:12 PM

jQueryEasyUI是一个基于jQuery的用户界面插件框架,它提供了丰富的易用的界面组件和插件,可以帮助开发者快速构建美观且功能强大的网页。在本文中,我们将探讨通过使用jQueryEasyUI带来的网页设计灵感与技巧,并给出具体的代码示例。1.响应式布局响应式设计是现代网页设计的重要趋势,它可以使网页在不同设备上呈现最佳的用户体验。jQuery

使用jQuery EasyUI创建现代化的网页界面使用jQuery EasyUI创建现代化的网页界面Feb 23, 2024 pm 10:18 PM

利用jQueryEasyUI打造现代化网页界面在当今互联网的快速发展中,网页设计变得越来越重要。为了吸引用户、提升用户体验以及展现专业性,设计一个现代化的网页界面至关重要。为了实现这一目标,我们可以利用jQueryEasyUI这个优秀的前端框架来简化开发过程。下面将介绍如何利用jQueryEasyUI打造现代化网页界面,并提供一些具体的代码示例。什么是

推荐易于操作的jQuery EasyUI插件推荐易于操作的jQuery EasyUI插件Feb 25, 2024 pm 09:33 PM

jQuery是一款流行的JavaScript框架,广泛应用于Web开发中,而jQueryEasyUI是基于jQuery开发的一套简单易用的UI插件库。本文将介绍几款优秀的jQueryEasyUI插件,并给出具体的代码示例,帮助大家更快上手使用这些插件。1.DataGrid(数据表格)DataGrid是一个表格展示数据的插件,支持数据的加载、排序、筛选等

创建交互式网页的方法:利用jQuery EasyUI创建交互式网页的方法:利用jQuery EasyUIFeb 25, 2024 pm 09:09 PM

如何使用jQueryEasyUI创建交互式网页?在现代网页设计中,交互式网页已经成为吸引用户和提升用户体验的关键因素之一。为了实现交互式网页的设计,开发人员需要利用各种技术和工具来实现用户与网页的互动。其中,jQueryEasyUI作为一个强大的开源JavaScript库,提供了丰富的UI组件和强大的交互功能,能够帮助开发人员快速构建出漂亮、功能丰富的交

简化网页设计流程:jQuery EasyUI简化网页设计流程:jQuery EasyUIFeb 24, 2024 pm 09:57 PM

jQueryEasyUI:让网页设计更加高效随着互联网的迅速发展,网页设计已经成为了现代社会中不可或缺的一部分。为了提高网页设计的效率和质量,前端开发人员需要使用一些优秀的工具和框架。其中,jQueryEasyUI是一个非常流行和实用的工具,它提供了多种UI组件和插件,能够帮助开发人员快速构建出美观且功能丰富的网页界面。jQueryEasyUI是基

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)