关于二级目录拖拽排序的实现(源码示例下载)
在开发项目中经常碰到二级目录形式。比如文章模块、产品模块,很多应多都基于两级分类形式。而普通的解决排序方案,不管是一级分类,还是多级分类,都是由管理员在后台手动编辑同级分类排序的值来设置排序,根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。jQuery有对于排序采用拖拽方式来实现排序,从用户层面,这样的操作非常直观,操作简便。曾经在一个项目中,产品分类采用的是两级分类,显示如下图所示:
在排序问题上,决定使用jQuery的拖拽插件来实现:拖拽一级分类时,对一级分类进行排序;拖拽某一级分类狼蚁网站SEO优化的子分类时,对该子分类进行拖拽排序。
拖拽一级分类名称前台的“+”号图标,对一级分类进行拖拽排序。
拖拽某一级分类下的二级分类名称前的“-”号图标,对该分类下的二级分类进行拖拽排序;
狼蚁网站SEO优化是实现上述功能的数据库结构及程序代码
数据库结构CREATE TABLE IF NOT EXISTS `product_classify` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`parentId` int(10) unsigned NOT NULL,
`name` varchar(50) DEFAULT NULL,
`sort` int(10) unsigned NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;
导入数据
INSERT INTO `product_classify` (`id`, `parentId`, `name`, `sort`) VALUES
(1, 0, '魔术道具', 1),
(2, 1, '近景魔术', 2),
(3, 1, '舞台魔术', 1),
(4, 1, '刘谦魔术', 3),
(5, 0, '千术道具', 2),
(6, 5, '麻将牌九系列', 3),
(7, 5, '扑克系列', 1),
(8, 5, '色子系列', 5),
(9, 5, '变牌器系列', 4),
(10, 5, '高科技系列', 2);
样式代码
<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-: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;}
/*==================二级目录===================*/
.nav li ul{list-style:none;text-align:left;margin-:4px;}
.nav li ul li{ text-indent:25px;border:none;/*二级目录的背景色*/ 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>
载入js文件及代码
<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");//将全部大类前面的图标改为加号
$("#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);
}
?>
实例下载
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程