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;
프런트엔드 코드는 다음과 같습니다.

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

gt ;


지역 선택 제목>



= "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行代码,以便在第一次初始化时就加载异步的内容.