セカンダリディレクトリのドラッグ＆ドロップソートの実装について（ソースコードサンプルダウンロード）_PHPチュートリアル

第 2 レベルのディレクトリ形式は、開発プロジェクトでよく使用されます。たとえば、記事モジュールや製品モジュールなど、多くのアプリは 2 レベルの分類形式に基づいています。通常の並べ替えソリューションでは、1段階分類でも多段階分類でも、管理者がバックグラウンドで同レベル分類の値を手動で編集して並べ替えを設定し、その値に基づいて表示順序が決定されます。この操作方法は比較的面倒です。 jQuery はドラッグ アンド ドロップで並べ替えを行うことができ、ユーザー レベルでは非常に直感的で簡単に操作できます。プロジェクトでは、製品分類が 2 段階の分類を使用しており、表示は下図のようになります。

並べ替えの問題に関しては、jQuery のドラッグ アンド ドロップ プラグインを使用することにしました。最初のレベルのカテゴリをドラッグすると、特定のレベルのカテゴリの下にあるサブカテゴリをドラッグすると、最初のレベルのカテゴリが並べ替えられます。サブカテゴリはドラッグ アンド ドロップで並べ替えられます。

第 1 レベルのカテゴリ名のフロントデスクにある「+」アイコンをドラッグして、第 1 レベルのカテゴリを並べ替えます。

特定レベルの分類の下にある第 2 レベルのカテゴリの名前の前にある「-」アイコンをドラッグして、このカテゴリの下にある第 2 レベルのカテゴリを並べ替えます。

以下は、上記の機能を実現するためのデータベース構造とプログラムコードです

​​

データベース構造

コードをコピー

コードは次のとおりです: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> 不透明度: 0.5,<br> カーソル:'move',<br> revert:true,<br> ハンドル:'.f',<br> プレースホルダー:'ui-move',<br> update:function(){<br> serial= $(this).sortable("serialize");<br> $("#return").load("myRun/sort.php?"+serial);<br> }<br> });<br> $("#mm div") .sortable({<br> 不透明度: 0.5,<br> カーソル:'move',<br> revert:true,<br> ハンドル:'.t',<br> プレースホルダー:'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 で子クラスを表示:なしにします。これにより、最初の 1 つが直接表示されます。 $('#mm ul:first div').show();//显示第一主题分类列表<br> $('#mm ul:first .f').attr("src","images/nofollow. gif");//改变图片は“-”状態<br>});<br></script>

显表示代

复制代代価如下:

//どこより条件来过滤子类，仅表示分类（一级）
$sql='a.id,a.parentId,a.name,a.sort,count(b.id) を product_classify からのカウントとして選択';
$sql.=' left join product_classify as b on b.parentId=a.id where a.parentId=0';
$sql.=' a.id でグループ化 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.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 "
  < /span>";
  while($arr2=mysql_fetch_array($query2)){
  echo "

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

  ";
  }
  echo '
  ' ;
  }
  echo "
gt;

";
}
}else{
echo '

暂无产品分类

';
}
?>

排序操作sort.php

复制代码代码如下:

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

实例下ダウンロード
二级目录拖拽排序的实现及演演示源网下ダウンロード

http://www.bkjia.com/PHPjc/326774.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/326774.html技術記事一般的な解決順序は、文章モジュールや製品モジュールのように、2 つの階層形式に基づいています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。