ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了。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 < 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');
}
}
//增加子节点
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 < 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)
{
//此处省略得到数据列表的代码
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
ajax与easyui树节点,EasyUI中的tree用法介绍相关推荐
- JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍
JS拼接字符串的过程中将JSON对象存到某个标签的属性中 JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍 案例描述 实现方法 ...
- php中使用mysql的视图_MYSQL中视图的用法介绍(代码示例)
本篇文章给大家带来的内容是关于MYSQL中视图的用法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.什么是视图 执行一条SQL,将结果集保存在一张虚拟表中 (相关 ...
- predicate java_java8中predicate的用法介绍(代码示例)
本篇文章给大家带来的内容是关于java8中predicate的用法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 传递代码 我们首先看一个例子,假设你有一个 Appl ...
- php simpledateformat,Java中SimpleDateFormat的用法介绍(代码示例)
本篇文章给大家带来的内容是关于Java中SimpleDateFormat的用法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.为什么要使用SimpleDateFo ...
- c语言中的指针语法,C语言中指针的用法介绍
C语言中指针的用法介绍 for(int i=0;i { num+=*s;s++; } return num; ) 这个例子中的函数 fun统计一个字符串中各个字符的 ASCII 码值之和.前面说了,数 ...
- protect java_java中的protect用法介绍
java中的protect用法介绍 发布时间:2020-03-25 16:12:13 来源:亿速云 阅读:159 作者:小新 protect是java中的权限关键字,一般是指定使用的范围.本文分享的是 ...
- php update语句,php中update语句用法介绍
php中update语句用法介绍 发布时间:2020-06-12 16:40:44 来源:亿速云 阅读:175 作者:小新 本篇文章和大家了解一下php中update语句用法介绍.有一定的参考价值,有 ...
- php eof 使用函数_PHP中EOF的用法介绍(附示例)
本篇文章给大家带来的内容是关于PHP中EOF的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. PHP EOF(heredoc)是一种在命令行shell(如sh.cs ...
- easyui树拖拽排序java_easyui tree 拖拽功能并将数据返回后台保存至数据库
1.需要实现tree的拖拽功能,首先在定义一个tree时候需要设置 dnd : true 2.easyui 给我们提供了一个onDrop : function(target, source, poin ...
最新文章
- 山西流感就诊比持续上升 专家为民答疑解惑
- 最新2018年全球DevOps薪资报告:行业和团队选择指南
- Docker容器内部署Java微服务的内存限制问题
- 解决:Module not found: node_modules\sass-loader\package.json (directory description file)
- modal verbs(一)
- 4.3.8 使用模板
- 小程序--改变子级别页面导航栏信息 / navigationBarTitleText
- 【导航仿真】基于matlab GUI PSINS导航仿真【含Matlab源码 1496期】
- 怎么批量重命名文件夹?
- Hacking Box Droopy: v0.2
- enterprise architect 小实验
- snaker mybatis 配置
- 【HTML+CSS】字体字号行高
- 成功项目策划“四要素”
- vue2 + tinymce 包含自定义图片上传及视频、音频上传
- 印象笔记的使用技巧总结
- php curl发布微博,php curl利用嘀咕、搜狐微博API发布微博
- git clone no matching host key type found. Their offer: ssh-rsa,ssh-dss... 报错
- Flask源码分析(一)
- 苹果手机无法更新系统问题
热门文章
- SBB:长期施肥降低了控制土壤微生物群落演替的随机性
- mSystems: 中科院动物所王德华组揭示低温下野生动物肠道菌群提高存活率的机制...
- mSystems:干旱对土壤微生物组的影响
- Microbiome:马铃薯疮痂病与土壤微生物组关系新进展
- R语言均匀分布函数uniform Distribution(dunif, punif, qunif runif)实战
- MCMC+马尔科夫链蒙特卡罗
- 顺序特征选择器(SequentialFeatureSelector (SFS))
- Keras训练神经网络进行分类并进行交叉验证(Cross Validation)
- android 拼图课程设计,Flash拼图游戏制作课程设计报告
- FALCON组装参数学习