我正在使用jQuery UI Sortable让用户对查询的数据进行排序,并将排序的数据保存到另一个表中。我将更改后的订单放入隐藏字段并保存数据。
<?php
// $queried_data is queried in LIFO order from a table, suppose an order like: 1,2,3,4
$saved_data = '2,3,4,1'; //queried as a string from another table
?>
<div class="data-sorter">
<ul id="sortable-data">
<?php foreach($queried_data as $key => $value) : ?>
<li id="<?php echo $value->ID; ?>">
<?php echo $value->title; ?>
</li>
<?php endforeach; ?>
</ul>
<!-- HIDDEN FIELD: putting saved data here, and updating according to the changed data, and finally saving as a comma-separated string -->
<input type="hidden" class="data-sorted" value="<?php echo $saved_data; ?>">
</div>
jQuery( document ).ready(function($) {
"use strict";
var sortable_data = $( "#sortable-data" );
sortable_data.sortable({
update: function( event, ui ) {
var list_id = this.id,
item_moved = ui.item.attr('id'),
order = $(this).sortable('toArray'),
positions = order.join(',');
var hidden_field = $('#'+ list_id).parent().find('.data-sorted');
hidden_field.val(positions).trigger('change');
}
});
sortable_data.disableSelection();
});
但正如你可以看到$queried_data
≠$saved_data
。因此,在刷新之后,PHP循环将事物按原始顺序排列。我没关系。我只需要使用可排序的jQuery UI操作DOM,以便它们按照顺序显示,来自$saved_data
。
我需要一种方法来触发jQuery UI可排序(我在Javascripts中的第6行),并根据$saved_data
(可用作隐藏字段.data-sorted
的值)设置值。
我明白我需要Sortatble create
event,但我无法弄明白,怎么样。
检查这个逻辑,应该工作。认为li id
与逗号分隔值相同。
在reorder()
调用之后页面加载调用函数sortable
。
$("#sortable-data").sortable({update: reorder});
function reorder()
{
orderArray = $('.data-sorted').val();
elementContainer = $("#sortable-data")
$.each(orderArray, function(key, val){
elementContainer.append($("li#"+val));
});
}