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


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面向对象的方法重载两种版本比较
Sep 08 PHP
PHP IF ELSE简化/三元一次式的使用
Aug 22 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
Jun 21 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
Jan 23 PHP
PHP中__get()和__set()的用法实例详解
Jun 04 PHP
解析如何屏蔽php中的phpinfo()函数
Jun 06 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
Aug 28 PHP
PHP格式化MYSQL返回float类型的方法
Mar 30 PHP
PHP实现的随机IP函数【国内IP段】
Jul 20 PHP
php  单例模式详细介绍及实现源码
Nov 05 PHP
php结合redis高并发下发帖、发微博的实现方法
Dec 15 PHP
thinkphp5.1 框架钩子和行为用法实例分析
May 25 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
用mysql内存表来代替php session的类
2009/02/01 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php给图片加文字水印
2015/07/31 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
javascript中的new使用
2010/03/20 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
详解React 条件渲染
2020/07/08 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
实习自我鉴定范文
2013/10/30 职场文书
超越自我演讲稿
2014/05/21 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书