Html製作批量資料功能時，尤其處理類別分類時，經常會被要求要做類別排序功能
因此Html的元素命名規則，需改為陣列命名規則 (ex. name="categoryId[]")
如此即可直接透過 jQuery UI 的sortable語法，透過元素拖曳方式，調整佈局內容順序
之後處理內容POST時寫回資料庫時，就會依重新調整後的順序重新排列
特別應用在JSON轉Array的規則尤其方便，趕快把解法記錄一下
<script>
// 拖曳排序
if ($('#sortable').length > 0) {
$('#sortable').sortable({
// 拖曳完成控制
stop: function () {
// 將陣列資料整理成字串
var arrayStr = $('input[name="categoryId[]"]').map(function () {
return $(this).val();
}).get().join(',');
$.post('/resort', { arrayStr: arrayStr }, function (result) {
// alert(result);
})
}
});
$('#sortable').disableSelection();
}
</script>
PHP處理端將字串拆回陣列進行處理
<?php
# resort - 重新排序
function resort() {
$array = explode(',', $this->input->post('arrayStr'));
$count = count($array);
$i = $count;
// 做DESC倒序, 數字越大排序越前
foreach ($array as $categoryId) {
$params = array(
'categorySort' => $i
);
$this->category_model->dataModify($categoryId, $params);
$i--;
}
}