지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

高洛峰
풀어 주다： 2017-03-23 17:30:16
원래의
1822명이 탐색했습니다.

이 기사에 기록된 내용은 회원들이 작은 모듈 기능을 개발하도록 유도할 때 팝업 창을 사용하여 트리형 캐스케이드 단위 선택 항목을 로드해야 했고, 최종적으로 개발을 위해 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 != &#39;&#39;) { info += &#39;,&#39;; }
            info += nodes[i].text;
        }
        //alert(JSON.stringify(nodes));
    }
    else {
        var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
        if (node != null) {
            info = node.text;                
        }
    }
    $("#"+rows).val(info);
    $(&#39;#treewindow&#39;).window(&#39;close&#39;);
    nodekeep="";
    nodeExp=false;
}
//全部展开
function collapseAll() {
    $("#radCollapse").attr("checked", "checked");
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    if (node) {
        $(&#39;#basetree&#39;).tree(&#39;collapseAll&#39;, node.target);
    } else {
        $(&#39;#basetree&#39;).tree(&#39;collapseAll&#39;);
    }
}
//全部收缩
function expandAll() {
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    if (node) {
        $(&#39;#basetree&#39;).tree(&#39;expandAll&#39;, node.target);
    } else {
        $(&#39;#basetree&#39;).tree(&#39;expandAll&#39;);
    }
}
//增加子节点
function append(datas,cnode) {
    var node = cnode;
    $(&#39;#basetree&#39;).tree(&#39;append&#39;, {
        parent: node.target,
        data: datas
    });
    nodekeep+=","+node.id;
}
//重新加载
function reload() {
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    if (node) {
        $(&#39;#basetree&#39;).tree(&#39;reload&#39;, node.target);
    } else {
        $(&#39;#basetree&#39;).tree(&#39;reload&#39;);
    }
}
//删除子节点
function remove() {
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    $(&#39;#basetree&#39;).tree(&#39;remove&#39;,node.target);
}
로그인 후 복사

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

<%@ WebHandler Language="C#" Class="getTreeNode" %>
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<TreeInfo> 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;
        }
    }
}
로그인 후 복사

키 코드는 이미 위에 있습니다. 현재는 다음과 같습니다. 이 문제를 해결할 수 있는 유일한 방법입니다. 시간이 있으면 트리를 확장하고 하위 노드를 지우는 메서드를 추가할 수 있습니다. 이는 구현하기가 더 쉽고 편리합니다.

jQuery EasyUI의 트리 사용 가이드에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련글 :

easyui datagrid paging 4, easyUI-seven Layouts(layout)

일반 데이터베이스 운용 첫 입문- end easyui-datagrid, form(php), easyuidatagrid

jQuery EasyUI 튜토리얼-패널(패널)

관련 라벨：
jQuery EasyUI tree
원천：php.cn
이전 기사：예에서는 jQuery EasyUI 트리에서 상태 속성을 주의해서 사용하는 방법을 설명합니다. 다음 기사：jquery easyui의 treegrid 사용에 대한 간단한 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1976
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2133
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1802
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1700
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1709
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿