A level Two directory is often encountered in development projects. For example, the article module, product modules, many should be based on the two-level classification form. and the ordinary solution to sort the scheme, whether it is a level classification, or multi-level classification, are by the administrator in the background manually edit the peer category sorting values to set the order, based on the size of the value of the decision to display the sequence. This way of operation is rather cumbersome. jquery has a sort of drag-and-drop method for sorting, from the user level, this operation is very intuitive, easy to operate. Once in a project, the product classification uses a level two classification, which shows the following figure:
In sorting, decide to use jquery's drag-and-drop plugin to do this: sort the first-level categories by dragging and dropping the first level, and dragging and dropping the subcategories when you drop the subcategories below a certain level of classification.
Drag and drop the "+" icon in the foreground of the first level category name to drag and drop the first level category.
Drag and drop the "-" icon before the category two class name, and then drag and drop the category two classification;
The following is the database structure and program code to implement the above functions
database structure
Copy Code code as follows:
CREATE TABLE IF not EXISTS ' product_classify ' (
' ID ' int (a) unsigned not NULL auto_increment,
' ParentID ' int (a) unsigned not NULL,
' Name ' varchar DEFAULT NULL,
' Sort ' int (a) unsigned not NULL DEFAULT ' 0 ',
PRIMARY KEY (' id ')
) Engine=myisam auto_increment=27 DEFAULT Charset=utf8;
Import Data
Copy Code code as follows:
INSERT into ' product_classify ' (' id ', ' parentid ', ' name ', ' sort ') VALUES
(1, 0, ' magic props ', 1),
(2, 1, ' Close-up Magic ', 2),
(3, 1, ' stage magic ', 1),
(4, 1, ' Liu Qian Magic ', 3),
(5, 0, ' thousand props ', 2),
(6, 5, ' Mahjong Gow series ', 3),
(7, 5, ' Poker series ', 1),
(8, 5, ' Dice series ', 5),
(9, 5, ' Variable Card series ', 4),
(10, 5, ' High-tech series ', 2);
Style Code
Copy Code code as follows:
<style type= "Text/css" >
<!--
body{margin:0px;}
Img{vertical-align:middle;}
. tab td{height:28px;font-size:13px;background-color: #FFFFFF;}
form{margin:0px;padding:0px;}
. Edit,.del,.pointer{cursor:pointer;}
. ui-move{border:1px dashed #666; height:30px;}
. Title{text-align:left;padding-left:7px;height:30px;font-size:13px;font-weight:bold;color: #444;}
ul,li{margin:0px;padding:0px;}
. left_nav{margin:0px 10px 0 10px;padding-top:5px;font-size:14px;line-height:30px;}
. Left_nav Li{list-style-type:none;}
. Nav{width:280px;list-style-type:none;text-align:left;}
. Nav Li span{margin:0 0px 0 10px;font-size:12px;}
/*================== Level Two directory ===================*/
. Nav Li ul{list-style:none;text-align:left;margin-top:4px;
. NAV Li ul li{text-indent:25px;border:none;/* level Two directory background color * * MARGIN:-7PX 0 0 0;_margin:0px 0 8px 0;}
. navv Li Span{margin:0 0px 0 10px;font-size:12px;}
. f{vertical-align:middle;width:16px;height:16px;}
. Nav Div{display:none;}
-->
</style>
load JS file and code
Copy Code code as follows:
<script language= "JavaScript" type= "Text/javascript" src= "Js/jquery1.6.2.js" ></script>
<script language= "JavaScript" type= "Text/javascript" src= "Js/jquery-ui-1.7.1.custom.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#mm"). Sortable ({
opacity:0.5,
Cursor: ' Move ',
Revert:true,
Handle: '. F ',
Placeholder: ' Ui-move ',
Update:function () {
serial=$ (This). Sortable ("serialize");
$ ("#return"). Load ("myrun/sort.php?") +serial);
}
});
$ ("#mm div"). Sortable ({
opacity:0.5,
Cursor: ' Move ',
Revert:true,
Handle: '. T ',
Placeholder: ' Ui-move ',
Update:function () {
serial=$ (This). Sortable ("serialize");
$ ("#return"). Load ("myrun/sort.php?") +serial);
}
});
$ (". F"). Toggle (function () {
if ($ (this). attr ("src") = = ' Images/plus.gif ') {
$ ("#mm"). Find (". F"). attr ("src", "images/plus.gif");//change the icon in front of all large classes to a plus sign
$ ("#mm"). Find ("div"). Hide ()//hidden subclass
$ (' div ', $ (this). Parents ('. Nav:first ')). Show ()//display subclasses of the currently clicked large class
$ (this). attr ("src", "images/nofollow.gif");//change the plus icon in front of the currently clicked large class to a minus icon
}else{
$ (this). attr ("src", "images/plus.gif");
$ (' div ', $ (this). Parents ('. Nav:first ')). Hide ();//$ ($ (this). Parents (' div:first ') + '. Odd2 '). Hide ();
}
},function () {
if ($ (this). attr ("src") = = ' Images/plus.gif ') {
$ ("#mm"). Find (". F"). attr ("src", "images/plus.gif");
$ ("#mm"). Find ("div"). Hide ();
$ (' div ', $ (this). Parents ('. Nav:first ')). Show ();
$ (this). attr ("src", "images/nofollow.gif");
}else{
$ (this). attr ("src", "images/plus.gif");
$ (' div ', $ (this). Parents ('. Nav:first ')). Hide ();//$ ($ (this). Parents (' div:first ') + '. Odd2 '). Hide ();
}
});
$ ('. Odd2 ', ' Table:first '). Hide ()//Initialize hidden topic category <--Change: In CSS, the class Display:none. This will show the first one directly. The previous effect is to expand all, then hide it all, and then display the first one. Not too good-looking.
$ (' #mm ul:first div '). Show ()//Display the first topic category list
$ (' #mm ul:first. F '). attr ("src", "images/nofollow.gif");//Change Picture as "-"
});
</script>
Display Code
Copy Code code as follows:
<div class= "Left_nav" id= "mm" >
<span style= ' display:none ' id= ' menu_productclassify ' ></span>
<?php
Filter subclasses by where conditions, showing only categories (first level)
$sql = ' Select A.id,a.parentid,a.name,a.sort,count (b.id) as Count from Product_classify as a ';
$sql. = ' LEFT join Product_classify as B on b.parentid=a.id where a.parentid=0 ';
$sql. = ' GROUP by a.id Order by A.sort ';
$query =mysql_query ($sql);
if (mysql_num_rows ($query)) {
while ($arr =mysql_fetch_array ($query)) {
Echo ' <ul id= ' menu_ '. $arr [id]. ' class= ' nav ' > ';
echo "<li id= ' nav_li ' > $arr [name] ($arr [count])";
$sql = "Select A.id,a.name,a.sort from Product_classify as a where a.parentid= $arr [id] GROUP by a.id order by A.sort";
$query 2=mysql_query ($sql);
if (Mysql_num_rows ($query 2)) {
echo "<div id= ' two_$arr[id] ' ><span style= ' display:none ' ' id= ' menu_productclassify ' ></span> ';
while ($arr 2=mysql_fetch_array ($query 2)) {
echo "<ul id= ' menu_$arr2[id] ' class= ' navv ' >";
echo "<li> $arr 2[name]</li>";
echo "</ul>";
}
Echo ' </div> ';
}
echo "</li></ul>";
}
}else{
Echo ' <li id= "Nav_li" > No product Classification </li> ';
}
?>
</div>
Sort Operations sort.php
Copy Code code as follows:
<?php
Include (".. /conn.php ");
$menu =$_get[' menu '];
Switch (strtolower ($menu [0])) {
Case ' productclassify ':
$table = ' product_classify ';
Break
}
for ($i =1; $i <count ($menu); $i + +) {
$sql = ' UPDATE '. $table. ' SET sort= '. $i. ' WHERE id= '. $menu [$i];
mysql_query ($sql);
}
?>
Instance Downloads
The realization and demonstration of two-level catalog dragging and dropping sorting source download
