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


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 相关文章推荐
用PHP和ACCESS写聊天室(九)
Oct 09 PHP
smarty实例教程
Nov 19 PHP
global.php
Dec 09 PHP
php 魔术函数使用说明
Feb 21 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
Mar 13 PHP
php通过数组实现多条件查询实现方法(字符串分割)
May 06 PHP
destoon整合UCenter图文教程
Jun 21 PHP
微信公众号开发之语音消息识别php代码
Aug 08 PHP
php中strlen和mb_strlen用法实例分析
Nov 12 PHP
php获取今日开始时间和结束时间的方法
Feb 27 PHP
使用PHPStorm+XDebug搭建单步调试环境
Nov 19 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
Feb 27 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自动更新新闻DIY
2006/10/09 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php实现的通用图片处理类
2015/03/24 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
一步步教你用Python实现2048小游戏
2017/01/19 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python range与enumerate函数区别解析
2020/02/28 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
我与祖国共奋进演讲稿
2014/09/13 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android