지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jQuery EasyUI_jquery의 트리 사용 가이드에 대한 간략한 분석

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

WBOY
풀어 주다： 2016-05-16 16:25:44
원래의
1100명이 탐색했습니다.

이 기사에는 멤버들이 작은 모듈 기능을 개발할 때 팝업 창을 사용하여 트리형 캐스케이드 단위 선택 사항을 로드해야 했고 마침내 개발을 위해 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，扩展一下添加一个清除子节확실한 방법, 这样应该实现起来会更容易方便.

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

관련 라벨：
easyui jquery tree
원천：php.cn
이전 기사：Js는 WScript.Shell 개체를 사용하여 .bat 파일 및 cmd Commands_javascript 기술을 실행합니다. 다음 기사：node.js_node.js에서 fs.chmodSync 메서드를 사용하기 위한 지침
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿