|
本篇文章介绍了，关于二级目录拖拽排序的实现(源码示例下载)。需要的朋友参考下
在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。jQuery有对于排序采用拖拽方式来实现排序，从用户层面，这样的操作非常直观，操作简便。曾经在一个项目中，产品分类采用的是两级分类，显示如下图所示：
 <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");//将全部大类前面的图标改为加号
$("#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();
}
},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();//初始化 隐藏主题分类 <--改动：在css中把子类display:none。这样可以直接显示第一个。以前的效果是全部展开，然后在全部隐藏，然后在显示第一个。不太好看。
$('#mm ul:first div').show();//显示第一个主题分类列表
$('#mm ul:first .f').attr("src","images/nofollow.gif");//改变图片为“-”状
});
</script>
显示代码
复制代码 代码如下:
<div class="left_nav" id="mm">
<span style='display:none' id="menu_productclassify"></span>
<?php
//通过where条件来过滤子类，仅显示分类（一级）
$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'><img class=f src='images/plus.gif'>$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";
$query2=mysql_query($sql);
if(mysql_num_rows($query2)){
echo "<div id='two_$arr[id]'><span style='display:none' id='menu_productclassify'></span>";
while($arr2=mysql_fetch_array($query2)){
echo "<ul id='menu_$arr2[id]' class='navv'>";
echo "<li><img class=t src='images/nofollow.gif'>$arr2[name]</li>";
echo "</ul>";
}
echo '</div>';
}
echo "</li></ul>";
}
}else{
echo '<li id="nav_li">暂无产品分类</li>';
}
?>
</div>
排序操作sort.php
复制代码 代码如下:
<?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);
}
?>
实例下载
二级目录拖拽排序的实现及演示源码下载
| 
发表于 2013-4-26 09:19:54
