巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
建站专提News

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

一佰互联网站开发设计(www.yinxi.net) 发布日期 2019-04-30 09:21:34 浏览数: 144

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块,很多应多都基于两级分类形式。而普通的解决排序方案,不管是一级分类,还是多级分类,都是由管理员在后台手动编辑同级分类排序的值来设置排序,根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。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开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

05
04月
SEO和网站设计之间如何平衡

在整合客户的网站时,需要考虑两件大事,用户和搜索引擎,需要一个针对搜索引擎进行优化的SEO友好型网站,在消费者搜索产品时在百度中显示。还需要... >>详情

11
04月
实例演示!聊聊品牌视觉设计的4个关键要素 -

我们知道一个公司的基础也是核心的需求是盈利,那么盈利需要通过各种销售手段来达成目标,而如何刺激消费者就是营销的手段之一。营销手段可以分为很多... >>详情

06
08月
微信平台已成最大社交工具,微信网站建设迫在眉

微信平台已成最大社交工具,微信网站建设迫在眉睫! 作为一个新兴的、很受年轻人喜欢的、市场占有率非常高、传播效果非常好的一个社交工具,微信已... >>详情

20
04月
【HTML5】3D模型--百行代码实现旋转立

最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。下面是预... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站