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


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初学者头疼问题总结
Jul 08 PHP
使PHP自定义函数返回多个值
Nov 26 PHP
实用函数2
Nov 08 PHP
php 数组的创建、调用和更新实现代码
Mar 09 PHP
PHP 获取文件路径(灵活应用__FILE__)
Feb 15 PHP
PHP中SSO Cookie登录分析和实现
Nov 06 PHP
CodeIgniter 完美解决URL含有中文字符串
May 13 PHP
PHP实现根据密码长度显示安全条
Jul 04 PHP
Laravel 实现密码重置功能
Feb 23 PHP
php strftime函数的详细用法
Jun 21 PHP
PHP7 mongoDB扩展使用的方法分享
May 02 PHP
laravel5.2表单验证,并显示错误信息的实例
Sep 29 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
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
PHP反射基础知识回顾
2020/09/10 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python中defaultdict的用法详解
2017/06/07 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python logging模块用法示例
2018/08/28 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
给老婆的检讨书
2015/01/27 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年领班工作总结
2015/04/29 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
复兴之路展览观后感
2015/06/02 职场文书
昆虫记读书笔记
2015/06/26 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers