在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。jQuery有对于排序采用拖拽方式来实现排序，从用户层面，这样的操作非常直观，操作简便。曾经在一个项目中，产品分类采用的是两级分类，显示如下图所示：
在排序问题上，决定使用jQuery的拖拽插件来实现：拖拽一级分类时，对一级分类进行排序；拖拽某一级分类下面的子分类时，对该子分类进行拖拽排序。
拖拽一级分类名称前台的“+”号图标，对一级分类进行拖拽排序。
拖拽某一级分类下的二级分类名称前的“-”号图标，对该分类下的二级分类进行拖拽排序；
下面是实现上述功能的数据库结构及程序代码
数据库结构CREATE TABLE IF NOT EXISTS `product_classify` (<BR> `id` int(10) unsigned NOT NULL AUTO_INCREMENT,<BR> `parentId` int(10) unsigned NOT NULL,<BR> `name` varchar(50) DEFAULT NULL,<BR> `sort` int(10) unsigned NOT NULL DEFAULT '0',<BR> PRIMARY KEY (`id`)<BR>) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;<BR>
导入数据
INSERT INTO `product_classify` (`id`, `parentId`, `name`, `sort`) VALUES<BR>(1, 0, '魔术道具', 1),<BR>(2, 1, '近景魔术', 2),<BR>(3, 1, '舞台魔术', 1),<BR>(4, 1, '刘谦魔术', 3),<BR>(5, 0, '千术道具', 2),<BR>(6, 5, '麻将牌九系列', 3),<BR>(7, 5, '扑克系列', 1),<BR>(8, 5, '色子系列', 5),<BR>(9, 5, '变牌器系列', 4),<BR>(10, 5, '高科技系列', 2);<BR>
样式代码
<style type="text/css"><BR><!---ecms -ecms <BR>body{margin:0px;}<BR>img{vertical-align:middle;}<BR>.tab td{height:28px;font-size:13px;background-color:#FFFFFF;}<BR>form{margin:0px;padding:0px;}<BR>.edit,.del,.pointer{cursor:pointer;}<BR>.ui-move{border:1px dashed #666;height:30px;}<BR>.title{text-align:left;padding-left:7px;height:30px;font-size:13px;font-weight:bold;color:#444;}</P><P>ul,li{ margin:0px;padding:0px;}<BR>.left_nav{margin:0px 10px 0 10px;padding-top:5px;font-size:14px;line-height:30px;}<BR>.left_nav li{list-style-type:none;}<BR>.nav{width:280px;list-style-type:none;text-align:left;}<BR>.nav li span{margin:0 0px 0 10px;font-size:12px;}<BR>/*==================二级目录===================*/<BR>.nav li ul{list-style:none;text-align:left;margin-top:4px;}<BR>.nav li ul li{ text-indent:25px;border:none;/*二级目录的背景色*/ margin:-7px 0 0 0;_margin:0px 0 8px 0;}<BR>.navv li span{margin:0 0px 0 10px;font-size:12px;}<BR>.f{vertical-align: middle;width:16px;height:16px;}<BR>.nav div{display:none;}<BR>--><BR></style><BR>
载入js文件及代码
<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script><BR><script language="JavaScript" type="text/JavaScript" src="js/jquery-ui-1.7.1.custom.min.js"></script><BR><script><BR>$(document).ready(function(){<BR> $("#mm").sortable({<BR> opacity: 0.5,<BR> cursor:'move',<BR> revert:true,<BR> handle:'.f',<BR> placeholder:'ui-move',<BR> update:function(){<BR> serial=$(this).sortable("serialize");<BR> $("#return").load("myRun/sort.php?"+serial);<BR> }<BR> });<BR> $("#mm div").sortable({<BR> opacity: 0.5,<BR> cursor:'move',<BR> revert:true,<BR> handle:'.t',<BR> placeholder:'ui-move',<BR> update:function(){<BR> serial=$(this).sortable("serialize");<BR> $("#return").load("myRun/sort.php?"+serial);<BR> }<BR> });<BR> $(".f").toggle(function(){<BR> if($(this).attr("src")=='images/plus.gif'){<BR> $("#mm").find(".f").attr("src","images/plus.gif");//将全部大类前面的图标改为加号<BR> $("#mm").find("div").hide();//隐藏子类<BR> $('div',$(this).parents('.nav:first')).show();//显示当前点击大类的子类<BR> $(this).attr("src","images/nofollow.gif");//将当前点击的大类前面的加号图标更改为减号图标<BR> }else{<BR> $(this).attr("src","images/plus.gif");<BR> $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();<BR> }<BR> },function(){<BR> if($(this).attr("src")=='images/plus.gif'){<BR> $("#mm").find(".f").attr("src","images/plus.gif");<BR> $("#mm").find("div").hide();<BR> $('div',$(this).parents('.nav:first')).show();<BR> $(this).attr("src","images/nofollow.gif");<BR> }<mark style="color:transparent">本%文来源gaodaimacom搞#^代%!码网@</mark>搞代gaodaima码else{<BR> $(this).attr("src","images/plus.gif");<BR> $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();<BR> }<BR> });<BR> //$('.odd2','table:first').hide();//初始化 隐藏主题分类 <--改动：在css中把子类display:none。这样可以直接显示第一个。以前的效果是全部展开，然后在全部隐藏，然后在显示第一个。不太好看。<BR> $('#mm ul:first div').show();//显示第一个主题分类列表<BR> $('#mm ul:first .f').attr("src","images/nofollow.gif");//改变图片为“-”状<BR>});<BR></script><BR>
显示代码
<div class="left_nav" id="mm"><BR><span id="menu_productclassify"></span><BR><?php<BR>//通过where条件来过滤子类，仅显示分类（一级）<BR>$sql='select a.id,a.parentId,a.name,a.sort,count(b.id) as count from product_classify as a';<BR>$sql.=' left join product_classify as b on b.parentId=a.id where a.parentId=0';<BR>$sql.=' group by a.id order by a.sort';<BR>$query=mysql_query($sql);<BR>if(mysql_num_rows($query)){<BR> while($arr=mysql_fetch_array($query)){<BR> echo '<ul id="menu_'.$arr[id].'" class="nav">';<BR> echo "<li id='nav_li'>$arr[name]（$arr[count]）";<BR> $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";<BR> $query2=mysql_query($sql);<BR> if(mysql_num_rows($query2)){<BR> echo "<div id='two_$arr[id]'><span id='menu_productclassify'></span>";<BR> while($arr2=mysql_fetch_array($query2)){<BR> echo "<ul id='menu_$arr2[id]' class='navv'>";<BR> echo "<li>$arr2[name]</li>";<BR> echo "</ul>";<BR> }<BR> echo '
‘;
}
echo “
“;
}
}else{
echo ‘
‘;
}
?>
