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


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中数组的三种排序方法分享
May 07 PHP
php curl模拟post请求小实例
Nov 13 PHP
PHP删除指定目录中的所有目录及文件的方法
Feb 26 PHP
php实现在限定区域里自动调整字体大小的类实例
Apr 02 PHP
php动态变量定义及使用
Jun 10 PHP
linux下php上传文件注意事项
Jun 11 PHP
PHP获取客户端及服务器端IP的封装类
Jul 21 PHP
YII框架批量插入数据的方法
Mar 18 PHP
thinkPHP实现的联动菜单功能详解
May 05 PHP
Yii2框架可逆加密简单实现方法
Aug 25 PHP
PHP常用正则表达式精选(推荐)
May 28 PHP
PHP 实现base64编码文件上传出现问题详解
Sep 01 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 调试工具Debug Tools
2011/04/30 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
详谈js模块化规范
2017/07/07 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
使用python Django做网页
2013/11/04 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python机器学习之随机森林(七)
2018/03/26 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
教师聘用意向书
2015/05/11 职场文书
班主任工作总结范文
2015/08/13 职场文书