백엔드 개발 PHP 튜토리얼 关于二级目录拖拽排序的实现(源码示例下载)_php实例

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

Jun 07, 2016 pm 05:24 PM

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块,很多应多都基于两级分类形式。而普通的解决排序方案,不管是一级分类,还是多级分类,都是由管理员在后台手动编辑同级分类排序的值来设置排序,根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。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);

样式代码
复制代码 代码如下:



载入js文件及代码
复制代码 代码如下:



<script><BR>$(document).ready(function(){<BR> $("#mm").sortable({<BR> opacity: 0.5,<BR> cursor:'move',<BR> revert:true,<BR> handle:'.f',<BR> placeholder:'ui-move',<BR> update:function(){<BR> serial=$(this).sortable("serialize");<BR> $("#return").load("myRun/sort.php?"+serial);<BR> }<BR> });<BR> $("#mm div").sortable({<BR> opacity: 0.5,<BR> cursor:'move',<BR> revert:true,<BR> handle:'.t',<BR> placeholder:'ui-move',<BR> update:function(){<BR> serial=$(this).sortable("serialize");<BR> $("#return").load("myRun/sort.php?"+serial);<BR> }<BR> });<BR> $(".f").toggle(function(){<BR> if($(this).attr("src")=='images/plus.gif'){<BR> $("#mm").find(".f").attr("src","images/plus.gif");//将全部大类前面的图标改为加号<BR> $("#mm").find("div").hide();//隐藏子类<BR> $('div',$(this).parents('.nav:first')).show();//显示当前点击大类的子类<BR> $(this).attr("src","images/nofollow.gif");//将当前点击的大类前面的加号图标更改为减号图标<BR> }else{<BR> $(this).attr("src","images/plus.gif");<BR> $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();<BR> }<BR> },function(){<BR> if($(this).attr("src")=='images/plus.gif'){<BR> $("#mm").find(".f").attr("src","images/plus.gif");<BR> $("#mm").find("div").hide();<BR> $('div',$(this).parents('.nav:first')).show();<BR> $(this).attr("src","images/nofollow.gif");<BR> }else{<BR> $(this).attr("src","images/plus.gif");<BR> $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();<BR> }<BR> });<BR> //$('.odd2','table:first').hide();//初始化 隐藏主题分类 <--改动:在css中把子类display:none。这样可以直接显示第一个。以前的效果是全部展开,然后在全部隐藏,然后在显示第一个。不太好看。<BR> $('#mm ul:first div').show();//显示第一个主题分类列表<BR> $('#mm ul:first .f').attr("src","images/nofollow.gif");//改变图片为“-”状<BR>});<BR></script>

显示代码
复制代码 代码如下:



//通过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 '";
  }
}else{
  echo '';
}
?>


排序操作sort.php
复制代码 代码如下:

include("../conn.php");
$menu=$_GET['menu'];
switch(strtolower($menu[0])){
  case 'productclassify':
    $table='product_classify';
    break;
}
for($i=1;$i  $sql='UPDATE '.$table.' SET sort=' . $i . ' WHERE id=' . $menu[$i];
  mysql_query($sql);
}
?>

实例下载
二级目录拖拽排序的实现及演示源码下载
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄) 11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄) Mar 03, 2025 am 10:49 AM

11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄)

Laravel의 플래시 세션 데이터로 작업합니다 Laravel의 플래시 세션 데이터로 작업합니다 Mar 12, 2025 pm 05:08 PM

Laravel의 플래시 세션 데이터로 작업합니다

Laravel Back End : Part 2, React가있는 React 앱 구축 Laravel Back End : Part 2, React가있는 React 앱 구축 Mar 04, 2025 am 09:33 AM

Laravel Back End : Part 2, React가있는 React 앱 구축

Laravel 테스트에서 단순화 된 HTTP 응답 조롱 Laravel 테스트에서 단순화 된 HTTP 응답 조롱 Mar 12, 2025 pm 05:09 PM

Laravel 테스트에서 단순화 된 HTTP 응답 조롱

PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법 PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법 Mar 14, 2025 am 11:42 AM

PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법

Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트 Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트 Mar 13, 2025 pm 12:08 PM

Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트

2025 PHP 상황 조사 발표 2025 PHP 상황 조사 발표 Mar 03, 2025 pm 04:20 PM

2025 PHP 상황 조사 발표

라 라벨에서 알림 라 라벨에서 알림 Mar 04, 2025 am 09:22 AM

라 라벨에서 알림

See all articles