jQuery EasyUIのtree使用ガイドの概要
結果が予想と異なることが多く、数日困惑し、展開後のサブノードは動的にロードされたが、収縮後に前に埋め込まれたデータを空にすることはできなかった.2回目の展開では、サブノードが繰り返しロードされ、データが繰り返し表示され、サブノードを消去する方法は提供されません.この問題を解決するためには,別の形式でサブノードの値をロードするしかなく,各ノードの値を保存し,既に存在するか否かを判断し,存在するか否かをデロードしない.
2つの方法は例を参照してください.
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に拡張して、サブノードをクリアする方法を追加して、実現しやすいはずです.
弟はここで恥をかいて、各位の専門家、同僚が類似の問題に出会ったかどうか、あるいはその他のもっと良い解決方法があって、ここで交流することを歓迎します.