jquery.simple.tree plug-in A simpler and more compatible infinite tree plug-in_jquery

The effect is as follows:

Select:

Drag:

jquery.simple.tree. Official website address: http://news.kg/wp -content/uploads/tree/ (seems like it can no longer be opened), but because the operation is relatively simple, we will use it for now.
As mentioned before, the jquery EasyUI Tree plug-in is simple and easy to use, but it still has many shortcomings after testing.
　For example:
　1. There is a problem with AJAX compatible with IE8.
2. If the asynchronous return data is slow, it may cause loading failure.
3. We only use the Tree function, but its size is really huge. ...
What we need is good compatibility, asynchronous, and small size (there are really few scenarios where Tree is used, so dedicated code files are better.)
Okay, let's start jquery.simple .tree journey:
First, load the files, three in total: CSS, Jquery main file, and its own js file;
Then, the code that defines Tree;
Finally, write The root node HTML code of this tree;
The front-end code is as follows:

Copy code The code is as follows:

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

Backend response code:
GetGroupHtmlByPid.ashx.cs

Copy code The code is as follows:

public class GetGroupHtmlByPid : IHttpHandler
{
GroupManager group;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int parentId = -1;
int type = 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"], out type);
}
if (parentId >= 0)
{
try
{
group = new GroupManager((GroupType)type);
var subAg = group.AllGroups.Where(c => c.ParentId == parentId);
resultStr = "

";
foreach (Base_group item in subAg)
{
resultStr = "
• " item.GroupName "";//这里可以解释前台代码为何要.substr(2);
  resultStr = "
  • {url:/common/GetGroupHtmlByPid.ashx?pid=" item.GroupId "}
  ";
  resultStr = "
";
}
resultStr = "

";
}
catch (Exception ex)
{
}
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}

后台看起来有点别扭，因为这个插件本身只支持HTML节点加载的，不过网上有人进行扩展了，用了JSON，不过个人感觉这对速度影响实在微乎其微，还是直接封装出HTML代码的。
总结一下jquery.simple.tree插件的优缺点：
优点：体积小，兼容性高，可异步，支持拖拽。
缺点：如果初始化的时候就需要异步加载，则需要手动更改它的几行代码。例如我的例子中。
本插件还有一个特别的功能，支持拖拽，可以用于后台维护无限分类，非常方便，有待读者自己去发掘，希望本文能够抛砖引玉，对你有所帮助！
源插件下载地址：http://plugins.jquery.com/project/SimpleTree
我的修改后的下载地址：simpletree.rar
我只修改了2行代码，以便在第一次初始化时就加载异步的内容。