关于二级目录拖拽排序的实现(源码示例下载)


Posted in PHP onApril 26, 2013

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块,很多应多都基于两级分类形式。而普通的解决排序方案,不管是一级分类,还是多级分类,都是由管理员在后台手动编辑同级分类排序的值来设置排序,根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。jQuery有对于排序采用拖拽方式来实现排序,从用户层面,这样的操作非常直观,操作简便。曾经在一个项目中,产品分类采用的是两级分类,显示如下图所示:

关于二级目录拖拽排序的实现(源码示例下载)

在排序问题上,决定使用jQuery的拖拽插件来实现:拖拽一级分类时,对一级分类进行排序;拖拽某一级分类下面的子分类时,对该子分类进行拖拽排序。

关于二级目录拖拽排序的实现(源码示例下载)

拖拽一级分类名称前台的“+”号图标,对一级分类进行拖拽排序。

关于二级目录拖拽排序的实现(源码示例下载)

拖拽某一级分类下的二级分类名称前的“-”号图标,对该分类下的二级分类进行拖拽排序;

下面是实现上述功能的数据库结构及程序代码

数据库结构
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-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;}
/*==================二级目录===================*/
.nav li ul{list-style:none;text-align:left;margin-top: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);
}
?>

实例下载
二级目录拖拽排序的实现及演示源码下载
PHP 相关文章推荐
粗略计算在线时间,bug:ip相同
Dec 09 PHP
php二分法在IP地址查询中的应用
Aug 12 PHP
ezSQL PHP数据库操作类库
May 16 PHP
PHP和.net中des加解密的实现方法
Feb 27 PHP
thinkphp使用phpmailer发送邮件的方法
Nov 24 PHP
ThinkPHP函数详解之M方法和R方法
Sep 10 PHP
php提交表单时保留多个空格及换行的文本样式的方法
Jun 20 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
Jul 10 PHP
PHP实现的服务器一致性hash分布算法示例
Aug 09 PHP
php ActiveMQ的安装与使用方法图文教程
Feb 23 PHP
php操作redis命令及代码实例大全
Nov 19 PHP
php png失真的原因及解决办法
Nov 17 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
Apr 26 #PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
Apr 26 #PHP
Eclipse中php插件安装及Xdebug配置的使用详解
Apr 25 #PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
Apr 25 #PHP
PHP中操作ini配置文件的方法
Apr 25 #PHP
基于python发送邮件的乱码问题的解决办法
Apr 25 #PHP
关于php正则匹配汉字的方法介绍
Apr 25 #PHP
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
python 爬取微信文章
2016/01/30 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python目录与文件名操作例子
2016/08/28 Python
python中异常报错处理方法汇总
2016/11/20 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
应用化学专业职业生涯规划书
2014/01/22 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
毕业感言怎么写
2015/07/31 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
python字符串的一些常见实用操作
2022/04/06 Python