jQuery EasyUI_jquery의 트리 사용 가이드에 대한 간략한 분석

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

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

두 가지 방법의 예를 참조하세요.

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

var treeTitle = '选择列表';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
변수 행;
var noinf=0;
$(함수() {
    $('#treewindow').window({
        제목: treeTitle,
        너비: 400,
        높이: 400,
        모달: 사실,
        그림자: 거짓,
        휴무: 사실,
        크기 조정 가능: false,
        최대화 가능: 거짓,
        최소화 가능: false,
        접을 수 있음: 거짓
    });
});
함수 treeWindowOpen(이름,rowIndx) {
    $('#treewindow').window('열기');
    nodekeep="";
    nodeExp=false;
    행=rowIndx.toString();
    $('#basetree').tree({
        체크박스: true,
        애니메이션: 사실,
        URL: treeUrl "&coln=" escape(name.toString()),
        cascadeCheck: 사실,
        onlyLeafCheck: 거짓,
        onBeforeExpand: 함수(노드, 매개변수) {
//------------第一种방법:异步加载子节点值-------------
//            $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString());
//------------第二种방식：Ajax 方法返回子节点Json值，使用append 方法加载子节点      
        $.ajax({
                유형: "POST",
                url: "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString()) "&casn=" escape(node.attributes.cas.toString()),
                캐시: 거짓,
                비동기: 거짓,
                데이터 유형: "json",
                성공: 함수(데이터) {
                    if(nodekeep.indexOf(node.id)==-1)
                    {
                     추가(데이터, 노드);
                     nodeExp = true;
                    }
                }
            });
            $("#radCollapse").removeAttr("checked");
        },
        onLoadError:함수(오류)
        {
            $.messager.alert('提示', '查询语句出错', 'error');
            if(nodeExp==false)
            {
                $("#basetree").children().remove();
            }
        },
        onLoadSuccess:함수(성공)
        {
            var child=$("#basetree").children().length;
            아니프 ;
            if(child==0&&noinf>1)
            {
                $.messager.alert('提示', '数据不存在', 'Info');
            }
        }
    });
}
함수 treeWindowClose() {
    $('#treewindow').window('닫기');
    nodekeep="";
    nodekeep=false;
}
함수 treeWindowSubmit() {
    var 노드 = $('#basetree').tree('getChecked');
    var 정보 = '';
    if (nodes.length > 0) {
        for (var i = 0; i < node.length; i ) {
            if (info != '') { info = ','; }
            정보 = 노드[i].text;
        }
        //alert(JSON.stringify(nodes));
    }
    그렇지 않으면 {
        var node = $('#basetree').tree('getSelected');
        if (노드 != null) {
            정보 = node.text;               
        }
    }
    $("#" 행).val(info);
    $('#treewindow').window('닫기');
    nodekeep="";
    nodeExp=false;
}
//전부 전시
함수 붕괴All() {
    $("#radCollapse").attr("checked", "checked");
    var node = $('#basetree').tree('getSelected');
    if (노드) {
        $('#basetree').tree('collapseAll', node.target);
    } 그 밖의 {
        $('#basetree').tree('collapseAll');
    }
}
//전체 부서
함수 ExpandAll() {
    var node = $('#basetree').tree('getSelected');
    if (노드) {
        $('#basetree').tree('expandAll', node.target);
    } 그 밖의 {
        $('#basetree').tree('expandAll');
    }
}
//增加子节点
함수 추가(데이터,cnode) {
    var 노드 = cnode;
    $('#basetree').tree('추가', {
        상위: node.target,
        데이터: 데이터
    });
    nodekeep ="," node.id;
}
//중요새加载
함수 다시 로드() {
    var node = $('#basetree').tree('getSelected');
    if (노드) {
        $('#basetree').tree('reload', node.target);
    } 그 밖의 {
        $('#basetree').tree('다시 로드');
    }
}
//删除子节点
함수 제거() {
    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
{
    공개 무효 ProcessRequest(HttpContext 컨텍스트)
    {
        context.Response.ContentType = "텍스트/일반";
        DataTable dt = (DataTable)context.Session["viewmaintain"];
        문자열 parentId = string.Empty;
        문자열 resultStr = string.Empty;
        문자열 속성 = string.Empty;
        문자열 colName = 문자열.Empty;
        문자열 sql = 문자열.Empty;
        문자열 Casname = string.Empty;
        bool colt = false;
        문자열 아이콘 = "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;
                동안(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();
                            }
                            그 외
                            {
                                콜트 = 사실;
                                sql = dt.Rows[i]["view_sql"].ToString();
                                pt = 거짓;
                            }
                            휴식;
                        }
                    }
                }
            }
        }
        if ((!string.IsNullOrEmpty(context.Request.QueryString["casn"])) && (!string.IsNullOrEmpty(context.Request.QueryString["coln"])))
        {
           문자열 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)
                    {
                        콜트 = 사실;
                        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 항목)
                    {
                        속성 = "";
                        속성 = "{"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 = "]";
            }
            그 외
            {
                resultStr = "[]";
            }
        }
        catch (예외예외)
        {
            resultStr = "출수";
        }
        context.Response.Write(resultStr);
    }
    공개 bool은 재사용 가능
    {
        얻다
        {
            false를 반환합니다.
        }
    }
}

 
　　关键性的代码道已经에서상면了，目前也就只能想到这种办法来解决了，有时间的话可以给tree，扩展一下添加一个清除子节확실한 방법, 这样应该实现起来会更容易方便.

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