EasyUI_jquery의 트리 사용 소개

정말 너무 바빠서 글을 쓸 일이 많아야 하는데, 글을 쓸 생각을 할 때마다 잊어버리는 게 별로 없어요. 10월의 마지막 날이고, 바쁘더라도 이 글을 마무리해야 하는데, 그렇지 않으면 또 한 달이 공백이 될 것 같아요.

이전에 멤버들에게 작은 모듈 기능 개발을 유도할 때 트리형 캐스케이드 단위 선택을 로드하기 위해 팝업창을 사용해야 했고, 결국 개발을 위해 jQuery EasyUI 플러그인을 사용하기로 결정했습니다. . 그런데 EasyUI에서 tree 플러그인을 사용하면서 많은 고민에 부딪혔습니다. 팝업 트리의 표시 속도를 향상시키기 위해 노드 값의 비동기 로딩을 사용합니다. 먼저 루트 노드가 로드되고 클릭된 노드에 따라 하위 노드가 로드됩니다.

종종 결과가 예상과 다르기 때문에 며칠간 혼란스러웠습니다. 확장 후 하위 노드가 동적으로 로드되지만 축소 후에는 확장 시 이전에 채워진 데이터가 지워지지 않습니다. 두 번째에는 하위 노드가 다시 로드되어 데이터가 반복적으로 표시되었으며 하위 노드를 지우는 방법이 제공되지 않았습니다. 이 문제를 해결하기 위해 다양한 방법을 시도한 결과, 다른 형태로 자식 노드의 값만 로드할 수 있으며, 각 노드 값을 저장하고 이미 존재하는지 확인하면 로드하지 않고 로드할 수 있습니다.

예시에는 두 가지 방법이 나와 있습니다.

코드 복사 코드는 다음과 같습니다.

var treeTitle = '목록 선택';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false; "";
var 행;
var noinf=0;
$(function() {
$('#treewindow').window({
title: treeTitle,
너비: 400,
높이: 400,
모달: true,
그림자: false,
닫힘: true,
크기 조정 가능: false,
최대화 가능: false,
최소화 가능 : false,
접을 수 있음: false
});
})
function treeWindowOpen(name,rowIndx) {
$('#treewindow').window('open');
nodekeep="";
nodeExp=false;
rows=rowIndx.toString()
$('#basetree').tree({
체크박스: 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()),
캐시 : false,
async: false,
dataType: "json",
success: function(data) {
if(nodekeep.indexOf(node.id)==-1)
{
append(데이터, 노드);
nodeExp = true;
}
})
$("#radCollapse").removeAttr("checked") ;
},
onLoadError:function(Error)
{
$.messager.alert('prompt', '쿼리 문 오류', 'error')
if(nodeExp= = false)
{
$("#basetree").children().remove()
}
},
onLoadSuccess:function(success)
{
var child=$("#basetree").children().length;
noinf
if(child==0&&noinf>1)
{
$.messager.alert('hint ' , '데이터가 존재하지 않습니다', '정보')
}
}
})

}
function treeWindowClose() {
$('# treewindow' ).window('close');
nodekeep="";
nodekeep=false;
}
function treeWindowSubmit() {
var 노드 = $('#basetree' ).tree('getChecked');
var info = '';
if (nodes.length > 0) {
for (var i = 0; i < node.length; i ) {
if (info != '') { info = ','; }
info = node[i].text
}
//alert(JSON.stringify(nodes)) ;
}
else {
var node = $('#basetree').tree('getSelected')
if (node ​​​​!= null) {
info = node .text;
}
}
$("#" 행).val(info)
$('#treewindow').window('close'); "";
nodeExp=false;
}
//모두 확장
functioncollapseAll() {
$("#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
}
//Reload
function reload() {
var node = $('#basetree').tree('getSelected')
if (노드) {
$('#basetree').tree('reload', node.target)
} else {
$('#basetree').tree('reload ');
}
}
//하위 노드 삭제
function Remove() {
var node = $('#basetree').tree('getSelected'); >$( '#basetree').tree('remove',node.target);
}


페이지 getTreeNode.ashx는 트리 노드 JSON 형식 데이터를 반환합니다.

코드 복사

코드는 다음과 같습니다.

<%@ WebHandler Language="C#" Class="getTreeNode" %>
시스템 사용;
System.Collections 사용;
System.Data 사용;
System.Linq 사용;
System.Web 사용;
System.Web.Services 사용;
System.Web.Services.Protocols 사용;
System.Xml.Linq 사용;
System.Collections.Generic 사용;
공용 클래스 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.Empty;
string colName = string.Empty;
문자열 sql = 문자열.비어 있음;
string Casname = string.Empty;
부울 콜트 = false;
문자열 아이콘 = "아이콘-프로필";
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 = 거짓;
}
휴식;
}
}
}
}
}
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();
휴식;
}
}
}
}
시도
{
if (parentId != "" && colt == true)
{
//此处省略得到数据列表的代码
목록 ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
resultStr = "";
resultStr = "[";
if (ltree.Count > 0)
{
foreach (ltree의 TreeInfo 항목)
{
attributes = "";
속성 = "{"cas":"" Casname;
속성 = "","val":"" item._text ""}";
resultStr = "{";
resultStr = string.Format(""id": "{0}", "text": "{1}", "iconCls": "{2}", "attributes": {3}, "state ": "닫음"", item._id, item._text, 아이콘, 속성);
resultStr = "},";
}
resultStr = resultStr.Substring(0, resultStr.Length - 1);
}
resultStr = "]";
}
else
{
resultStr = "[]";
}
}
catch(예외예외)
{
resultStr = "出错";
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}

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

　　작은弟재此献丑了，不知道各位专家、同仁有没有遇到类似的问题，或者有其它更매우 유용한 정보입니다.

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

작곡자 : ZHF　　

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.