> 웹 프론트엔드 > JS 튜토리얼 > jquery.simple.tree 플러그인 더 간단하고 호환성이 더 높은 무한 트리 플러그인_jquery

jquery.simple.tree 플러그인 더 간단하고 호환성이 더 높은 무한 트리 플러그인_jquery

WBOY
풀어 주다: 2016-05-16 18:20:29
원래의
1146명이 탐색했습니다.

효과는 다음과 같습니다.

선택:
jquery.simple.tree 플러그인 더 간단하고 호환성이 더 높은 무한 트리 플러그인_jquery
드래그:
jquery.simple.tree 플러그인 더 간단하고 호환성이 더 높은 무한 트리 플러그인_jquery
jquery.simple.tree 공식 홈페이지 주소: http://news. kg/wp -content/uploads/tree/ (더 이상 열 수 없는 것 같지만) 작업이 비교적 간단하기 때문에 일단은 사용하겠습니다.
앞서 언급했듯이 jquery EasyUI Tree 플러그인은 간단하고 사용하기 쉽지만, 테스트해본 결과 여전히 단점이 많습니다.
 예:
 1. IE8과 호환되는 AJAX에 문제가 있습니다. .
2. 비동기 반환 데이터가 느린 경우 로딩 실패가 발생할 수 있습니다.
3. Tree 기능만 사용하는데 그 크기가 정말 엄청납니다. ...
우리에게 필요한 것은 좋은 호환성, 비동기식, 작은 크기입니다(Tree를 사용하는 시나리오는 실제로 거의 없으므로 전용 코드 파일이 더 좋습니다.)
자, jquery.simple .tree 여행을 시작해 보겠습니다. :
먼저 CSS, Jquery 기본 파일, 자체 js 파일 총 3개 파일을 로드합니다.
그런 다음 Tree를 정의하는 코드
마지막으로 이 루트 노드 HTML 코드를 작성합니다. tree;
프런트엔드 코드는 다음과 같습니다.

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



지역 선택



= "simpleTree">
  • 지역 선택


      • {url:/common/GetGroupHtmlByPid.ashx?pid =0}


      • >



        백엔드 응답 코드:
        GetGroupHtmlByPid.ashx.cs



  • 코드 복사


    코드는 다음과 같습니다.

    공용 클래스 GetGroupHtmlByPid : IHttpHandler
    {
    GroupManager 그룹;
    public void ProcessRequest(HttpContext context)
    {
    context.Response.ContentType = "text/plain";
    int parentId = -1;
    int 유형 = 0;
    string resultStr = string.Empty;
    if (!context.Request.QueryString["pid"].IsNullOrEmpty())
    {
    Int32.TryParse(context.Request.QueryString["pid"], out parentId);
    }
    if (!context.Request.QueryString["type"].IsNullOrEmpty())
    {
    Int32.TryParse(context.Request.QueryString["type"], 출력 유형) ;
    }
    if (parentId >= 0)
    {
    try
    {
    group = new GroupManager((GroupType)type);
    var subAg = group.AllGroups.Where(c => c.ParentId == parentId);
    resultStr = "
      ";
      foreach(subAg의 Base_group 항목)
      {
      resultStr = "
    • " item.GroupName "";//这里可以解释前台代码为何要.substr(2);
      resultStr = "
      • {url:/common/GetGroupHtmlByPid.ashx?pid=" item.GroupId "}
      ";
      resultStr = "
    • ";
      }
      resultStr = "
    ";
    }
    catch(예외 예)
    {
    }
    }
    context.Response.Write(resultStr);
    }
    public bool IsReusable
    {
    get
    {
    return false;
    }
    }
    }

    后台看起来有点别扭,因为这个插件本身只支持HTML节点加载的不过网上有人进行扩迆, 了JSON, 불过个人感觉这对速島影响实在微乎其微,还是直接封装udeHTML代码的.
    总结一下jquery.simple.tree插件的优缺点:
    优点:体积小,兼容性高,可异步,支持拖拽。
    缺点:如果初始化的时候就需要异步加载,则需要手动更改它的几行代码。例如我的例子中。
    本插件还有一个特别的功能,支持拖拽,可以用于后台维护无限分类,不常方便,有待读者自己去发掘,希望本文能够抛砖引玉,对你有所帮助!
    源插件下载地址: http://plugins.jquery.com/project/SimpleTree
    我당신의 다운로드 위치:simpletree.rar
    저는 2行代码,以便在第一次初始化时就加载异步的内容.
    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿