时时商务社区

标题: 关于二级目录拖拽排序的实现(源码示例下载) [打印本页]

作者: 新格网络 时间: 2018-2-14 08:22

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。jQuery有对于排序采用拖拽方式来实现排序，从用户层面，这样的操作非常直观，操作简便。曾经在一个项目中，产品分类采用的是两级分类，显示如下图所示：

在排序问题上，决定使用jQuery的拖拽插件来实现：拖拽一级分类时，对一级分类进行排序；拖拽某一级分类下面的子分类时，对该子分类进行拖拽排序。

拖拽一级分类名称前台的“+”号图标，对一级分类进行拖拽排序。

拖拽某一级分类下的二级分类名称前的“-”号图标，对该分类下的二级分类进行拖拽排序；
下面是实现上述功能的数据库结构及程序代码
数据库结构

[U]复制代码[/U] 代码如下:
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;
导入数据
[U]复制代码[/U] 代码如下:
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);
样式代码
[U]复制代码[/U] 代码如下:
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;}
-->
载入js文件及代码
[U]复制代码[/U] 代码如下:
显示代码
[U]复制代码[/U] 代码如下:

$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 "";
   while($arr2=mysql_fetch_array($query2)){
      echo "";
      echo "

$arr2[name]";
      echo "";
   }
   echo '';
}
echo "";
  }
}else{
  echo '暂无产品分类';
}
?>
排序操作sort.php
[U]复制代码[/U] 代码如下:
实例下载
二级目录拖拽排序的实现及演示源码下载



您可能感兴趣的文章:

js 表格排序(编辑+拖拽+缩放)

简单的jquery拖拽排序效果实现代码

JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

javascript实现表格排序编辑拖拽缩放

jqueryUI里拖拽排序示例分析

jquery拖拽排序简单实现方法(效果增强版)

jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

通过jquery-ui中的sortable来实现拖拽排序的简单实例

微信小程序之拖拽排序（代码分享）

欢迎光临时时商务社区 (http://bbs.4435.cn/)