Although the implementation of the category multilevel issues the consequences of this really endless .....
Recursive queries, and double loop nested execution SQL statements are no different ...
This poses a serious performance problem.
Now redo these things, I think of 2 programs, the first:
For the relatively small number of multi-level menus, we can query all the records through the database, and then through the program recursive algorithm, data conversion.
The second type:
is when the database is designed, designed into a multi-level menu, each loaded through Ajax, 1.1-point expansion (each expansion of the AJAX request next level of data), so as to avoid the recursive performance loss, and easy to implement, very suitable for large amount of data, but, at a time can only show the level, Always ask for the next level of Ajax.
Because of the background management, the first design according to the first plan:
First of all, to design a database to facilitate the next two ways to expand,
This design, the main consideration is to facilitate the background of the extension of the foreground, FID field is a to facilitate the design of the foreground query, the advantage of this design is that if the query, such as all products under the top-level menu, only need to match the fuzzy query prefix, you can query all the products, the design of the field is still a little small, IsLeaf is to determine whether it is a leaf node, belongsid the parent ID,
Foreground code:
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> Product Category Management </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link href= ". /css/demo.css "rel=" stylesheet "type=" Text/css "/>"
<script src= ". /scripts/jquery-1.6.2.min.js "type=" Text/javascript "></script>
<script src= ". /scripts/miniui/miniui.js "type=" Text/javascript "></script><link href=". /scripts/miniui/themes/default/miniui.css "rel=" stylesheet "type=" Text/css "/>"
<link href= ". /scripts/miniui/themes/icons.css "rel=" stylesheet "type=" Text/css "/>"
<body>
<div class= "Mini-toolbar" >
<div class= "Mini-panel" title= "Product Category Management" iconcls= "Icon-add" style= "width:100%;height:500px";
Showtoolbar= "true" showcollapsebutton= "true" showfooter= "true"
>
<!--toolbar-->
<div property= "Toolbar" >
</div>
<!--footer-->
<div property= "Footer" >
</div>
<!--body-->
<ul id= "tree1" class= "Mini-tree" url= "Data/getproductinfo.ashx?method=getproducttype" style= : 100%;p adding:5px; "
Showtreeicon= "true" textfield= "text" idfield= "id" contextmenu= "#treeMenu"
>
</ul>
<ul id= "Treemenu" class= "Mini-menu" style= display:none; "onbeforeopen=" Onbeforeopen ">
<!--<li name= "Move" iconcls= "Icon-move" onclick= "Onmovenode" > Mobile node </li>-->
<li class= "Separator" ></li>
<li name= "AddNode" onclick= "Onaddnode" iconcls= "Icon-add" > Insert node </li>
<li name= "edit" iconcls= "Icon-edit" onclick= "Oneditnode" > Edit node </li>
<li name= "Remove" iconcls= "Icon-remove" onclick= "onremovenode" > Delete node </li>
<li name= "Cancel" iconcls= "Icon-cancel" onclick= "OnCancel" > Cancel </li>
<li class= "Separator" ></li>
</ul>
</div>
<br/><br/>
</div>
<script type= "Text/javascript" >
Mini.parse ();
var addtpye= "Add";
function OnCancel (e) {
var tree=mini.get ("Tree1");
var node=tree.getselectednode ();
Tree.isexpandednode (node);
}
function Onaddbefore (e) {
Addtype= "before";
AddItem (e);
}
function Onaddafter (e)
{
Addtype= "after";
AddItem (e);
}
function AddItem (e) {
var tree = mini.get ("Tree1");
var node = Tree.getselectednode ();
var NewNode = {id:0,text: "Empty", pid:node.id};
Mini.prompt ("Please enter category content:", "Please enter",
function (action, value) {
if (action = = "OK") {
$.ajax ({
URL: "Data/getproductinfo.ashx",
Type: "Post",
Data: "method=addproducttype&text=" +value+ "&pid=" +node.id+ "&isleaf=" +tree.isleaf (node),
Success:function (msg) {
if (msg) {
Alert ("Add success!");
Treeload ();
Newnode.text=value;
if (node!=null) {
//
Tree.addnode (NewNode, AddType, node);
// }
}
Else
Alert ("Add failed!");
}
});
}
else {
newnode.text= "Empty";
}
});
}
Refresh Tree
function Treeload () {
$.ajax ({
URL: "Data/getproductinfo.ashx?method=getproducttype",
Type: "JSON",
Success:function (JSON) {
var tree = mini.get ("Tree1");
alert (JSON);
var data= eval ("(" +json+ ")");
Tree.loaddata (data);
}
});
}
function Onaddnode (e) {
Addtype= "Add";
AddItem (e);
}
function Oneditnode (e) {
var tree = mini.get ("Tree1");
var node = Tree.getselectednode ();
Mini.prompt ("Please enter category content:", "Please enter",
function (action, value) {
if (action = = "OK") {
$.ajax ({
URL: "Data/getproductinfo.ashx",
Type: "Post",
Data: "method=saveproducttype&id=" +node.id+ "&text=" +value+ "&pid=" +node.pid+ "&IsLeaf=" + Tree.isleaf (node),
Success:function (msg) {
if (msg) {
Alert ("Save success!");
Tree.setnodetext (Node,value);
Treeload ();
}
Else
Alert ("Save failed!");
}
});
}
});
}
function Onremovenode (e) {
var tree = mini.get ("Tree1");
var node = Tree.getselectednode ();
if (node) {
if (Confirm (ok Delete selected node?)) {
This is submitted to the server
$.ajax ({
URL: "Data/getproductinfo.ashx",
Type: "Post",
Data: "Method=removeproducttype&id=" +node.id,
Success:function (msg) {
if (msg) {
Tree.removenode (node);
Alert ("Delete succeeded!");
}
else{
Alert ("Delete failed!");
}
}
});
}
}
}
function Onbeforeopen (e) {
var menu = E.sender;
var tree = mini.get ("Tree1");
var node = Tree.getselectednode ();
if (node && node.id = "-1") {//If root node (total root, then block menu display)
E.cancel = true;
Block Browser Default right-click menu
E.htmlevent.preventdefault ();
Return
// }
////////////////////////////////
var EditItem = mini.getbyname ("edit", menu);
var RemoveItem = mini.getbyname ("Remove", menu);
var addnodeitem=mini.getbyname ("AddNode", menu);
var moveitem=mini.getbyname ("Move", menu);
Edititem.show ();
Removeitem.show ();
Addnodeitem.show ();
if (node.id = = "-1") {//Total root directory
Removeitem.hide ();
Moveitem.hide ();
}
}
</script>
</body>
One difficulty is that JSON data is recursively generated:
JSON data for tree in BLL
Copy Code code as follows:
<summary>
Crafts category tree converted to JSON format
</summary>
<returns></returns>
public string Crafttypetreetojson ()
{
The JSON format passed
ienumerable<crafttype> crafttypelist = new Crafttypedal (). Listall ();
StringBuilder sb = new StringBuilder ("[");
foreach (Crafttype root in Crafttypelist)
{
if (root. Belongsid = =-1)
{
Sb. Append ("{id:\") + root.id + "\", text:\ "" + root. Name + "\");
Sb. Append (", pid:\" -1\ ");//Add parent node
Sb. Append (", expanded:\" false\ ");
if (root. IsLeaf = = "0")//if is not a leaf node, then, it is necessary to recursively add children:[{xxx}, Content
{
Sb. Append (", Children:");
Getleaftree (ref SB, (int) root.id, crafttypelist);//recursive Append leaf
}
Sb. Append ("},");
}
}
Sb. Remove (sb.) Length-1, 1); Get rid of the last redundant,
Sb. Append ("]");
Return Common.FormatToJson.MiniUiToJsonForTree (sb.) ToString (), "handicraft category");
}
<summary>
Recursively gets all categories of JSON data under the parent ID
</summary>
<param name= "SB" >json string </param>
<param name= "ParentID" > Parent id</param>
<param name= "Crafttypelist" > Category information collection </param>
public void Getleaftree (ref StringBuilder sb,int parentid,ienumerable<crafttype> crafttypelist)
{
Sb. Append ("[");
foreach (Crafttype leaf in crafttypelist)
{
if (leaf. Belongsid = = parentid//find leaves based on parent node
{
Sb. Append ("{id:\") + leaf.id + "\", text:\ "" + leaf. Name + "\");
Sb. Append (", pid:\" "+ ParentID +" \ ");//Add parent node
Sb. Append (", expanded:\" false\ ");
if (leaf. IsLeaf = = "0")//if is not a leaf node, then, it is necessary to recursively add children:[{xxx}, Content
{
Sb. Append (", Children:");
Getleaftree (ref SB, (int) leaf.id, crafttypelist);//recursive Append leaf
}
Sb. Append ("},");
}
}
Sb. Remove (sb.) Length-1, 1); Get rid of the last redundant,
Sb. Append ("]");
}
The effect chart is as follows:
Although it is AJAX implementation, but this is really AJAX one-time load data, so that the performance has a serious loss, but consider the background, so, did not do processing, but it is best to use the second method design, which is the best solution, also suitable for the foreground of the data display.
The second method is in practice ...
