在開發項目中經常碰到二級目錄形式。比如文章模組、產品模組,很多應多都基於兩級分類形式。而普通的解決排序方案,不管是一級分類,還是多級分類,都是由管理員在後台手動編輯同級分類排序的值來設定排序,根據該值的大小決定顯示的順序。這樣的操作方式比較煩瑣。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檔案及代碼
複製代碼 代碼如下:
顯示代碼
複製代碼 代碼如下:
//通過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.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
複製代碼 代碼如下:
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);
}
?>
執行個體下載
二級目錄拖拽排序的實現及示範源碼下載
http://www.bkjia.com/PHPjc/326774.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/326774.htmlTechArticle在開發項目中經常碰到二級目錄形式。比如文章模組、產品模組,很多應多都基於兩級分類形式。而普通的解決排序方案,不管是一級分類...