/ 網站開發

2023年03月01日 229

jQuery 拖曳排序 (Sortable) 應用


Html製作批量資料功能時,尤其處理類別分類時,經常會被要求要做類別排序功能
因此Html的元素命名規則,需改為陣列命名規則 (ex. name="categoryId[]")
如此即可直接透過 jQuery UI 的sortable語法,透過元素拖曳方式,調整佈局內容順序
之後處理內容POST時寫回資料庫時,就會依重新調整後的順序重新排列
特別應用在JSONArray的規則尤其方便,趕快把解法記錄一下

<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--;
		}
	}

參考連結:jQuery UI 实例 - 排序(Sortable)

標籤: #Javascript , #jQuery , #PHP