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

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。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,'魔术道具',1),
(2,1,'近景魔术',2),
(3,'舞台魔术',
(4,'刘谦魔术',3),
(5,'千术道具',
(6,5,'麻将牌九系列',
(7,'扑克系列',
(8,'色子系列',5),
(9,'变牌器系列',4),
(10,'高科技系列',2);

样式代码

代码如下:

载入js文件及代码

代码如下:

显示代码

代码如下:

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 '

echo "
• $arr[name]（$arr[count]）";
  $sql="select a.id,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 "
  ";
  while($arr2=MysqL_fetch_array($query2)){
  echo "

  ";
  echo "
  • $arr2[name]
  ";
  echo "

  ";
  }
  echo '
  ';
  }
  echo "

";
}
}else{
echo '

分类

';
}
?>

排序操作sort.PHP

代码如下:

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);
}
?>

实例下载