The effect is as follows:
Choose:
Dragging and dragging:
Jquery.simple.tree. Website address: http://news.kg/wp-content/uploads/tree/(seemingly has not opened), but because the operation is relatively simple, so we use it for the moment.
The jquery Easyui Tree plugin is easy to use, but there are still many drawbacks to testing,
For example:
1, compatible with IE8 Ajax problems.
2. If the asynchronous return data is slow, it can cause the load to fail.
3, we only use the tree function, but its size is a bit huge. ...
And what we need is, good compatibility, asynchronous, small size (with a tree scene is less, so it is still a special code file better.) ）
Okay, let's start our Jquery.simple.tree journey:
First, to load the file, a total of three: CSS, jquery main file, as well as its own JS file;
Then, it's the code that defines the tree;
Finally, write out the root node HTML code of the root tree;
The foreground code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Area Selection </title>
<link rel= "stylesheet" href= "/js/simpletree/jquery.simple.tree.css"/>
<script type= "Text/javascript" src= "/js/jquery1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "/js/simpletree/jquery.simple.tree.js" ></script>
<script type= "Text/javascript" >
var simpletreecollection;
$ (document). Ready (function () {
Simpletreecollection = $ ('. Simpletree '). Simpletree ({
Autoclose:true,
Afterclick:function (node) {
Alert ("You have selected:" + $ (' Span:first ', node). Text () + "ID:" + $ (' Span:first ', node). attr ("id"). substr (2))//Here Why ". substr (2) ", it is for special reasons that can be explained later. If you just need to get the text, you can take no ID.
},
Afterdblclick:function (node) {
Alert ("text-" +$ (' Span:first ', node). Text ())//double-click event
},
Aftermove:function (destination, source, POS) {
Alert ("destination-" +destination.attr (' id ') + "source-" +source.attr (' id ') + "pos-" +pos);/drag Event
},
Afterajax:function ()
{
Alert (' Loaded ');
},
Animate:true
, Doctofolderconvert:true
});
});
</script>
<body>
<ul class= "Simpletree" >
<li class= "root" ><span> Region selection </span>
<ul>
<li id= "root0" class= "open" ><span> China </span>
<ul class= "Ajax" >
<li id= ' 0 ' >{url:/common/GetGroupHtmlByPid.ashx?pid=0}</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Background Response code:
GetGroupHtmlByPid.ashx.cs
Copy Code code 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 = "<ul>";
foreach (Base_group item in Subag)
{
ResultStr + = "<li id=\" + Item. GroupId + "\" ><span id=\ "1_" + item. GroupId + ">" + Item. GroupName + "</span>" can explain the foreground code why. substr (2);
ResultStr + = "<ul class= ' Ajax ' ><li>{url:/common/getgrouphtmlbypid.ashx?pid=" + item. GroupId + "}</li></ul>";
ResultStr = "</li>";
}
ResultStr = "</ul>";
}
catch (Exception ex)
{
}
}
Context. Response.Write (RESULTSTR);
}
public bool IsReusable
{
Get
{
return false;
}
}
}
The background looks a bit awkward because the plugin itself only supports HTML node loading, but people on the web are expanding and using JSON, but the individual feels this has little impact on the speed, or it encapsulates the HTML code directly.
Summarize the pros and cons of the Jquery.simple.tree plug-in:
Advantages: Small size, high compatibility, can be asynchronous, support drag.
Disadvantage: If you need to load asynchronously when initializing, you need to manually change several lines of code for it. For example, in my example.
The plug-in also has a special function, support drag and drop, can be used for the background maintenance of the infinite classification, very convenient, waiting for the reader to explore themselves, I hope this article can be a good offer to you!
SOURCE Plugin Download Address: http://plugins.jquery.com/project/SimpleTree
My modified download address: Simpletree.rar
I have only modified 2 lines of code to load the asynchronous content the first time it is initialized.
