Select:
Drag:
Jquery. simple. tree. Official site address: http://news.kg/wp-content/uploads/tree/ (it seems that can not open), but because the operation is relatively simple, so we temporarily use it.
The jquery EasyUI Tree plug-in is simple and easy to use, but it still has many disadvantages after tests,
For example:
1. There is a problem with AJAX compatible with IE8.
2. loading may fail if asynchronous data is returned slowly.
3. We only use the Tree function, but its size is a little huge ....
What we need is good compatibility, Asynchronization, and small size (there are few scenarios using Tree, so it is better to use dedicated code files .)
Now, let's start jquery. simple. tree:
First, you need to load three files: CSS, Jquery main file, and its own js file;
Then, the code that defines the Tree;
Finally, write the HTML code of the root node of the tree;
The front-end code is as follows:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> region 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 selected:" + $ ('span: first', node ). text () + "id:" + $ ('span: first ', node ). attr ("id "). substr (2); // Why is ". substr (2) "for special reasons, which can be explained later. if you only need to take the text, you can not take the ID here.
},
AfterDblClick: function (node ){
// Alert ("text-" + $ ('span: first ', node). text (); // double-click the event
},
AfterMove: function (destination, source, pos ){
// Alert ("destination-" + destination. attr ('id') + "source-" + source. attr ('id') + "pos-" + pos); // drag an event
},
AfterAjax: function ()
{
// Alert ('loaded ');
},
Animate: true
//, DocToFolderConvert: true
});
});
</Script>
</Head>
<Body>
<Ul class = "simpleTree">
<Li class = "root"> <span> area 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>
</Html>
Background response code:
GetGroupHtmlByPid. ashx. csCopy codeThe 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 + = "<ul> ";
Foreach (Base_group item in subAg)
{
ResultStr + = "<li id = \" "+ item. groupId + "\"> <span id = \ "1 _" + item. groupId + "\"> "+ item. groupName + "</span>"; // here you can explain why the front-end code is required. 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 awkward, because the plug-in itself only supports loading HTML nodes, but some people have extended it on the Internet and used JSON, but I personally feel that this has little impact on speed, or directly encapsulate the HTML code.
To sum up the advantages and disadvantages of jquery. simple. tree Plugin:
Advantages: small size, high compatibility, asynchronous, and drag/drop supported.
Disadvantage: If asynchronous loading is required during initialization, You need to manually modify several lines of code. For example, in my example.
This plug-in also has a special function that supports drag and drop, and can be used to maintain unlimited classification in the background, which is very convenient for readers to explore. I hope this article will help you!
Source Plug-In: http://plugins.jquery.com/project/SimpleTree
My modified: simpletree.rar
I only modified two lines of code to load the asynchronous content during the first initialization.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
