Question

我正在尝试创建列表项，并将排序后的列表保存到数据库中。

当我单击“保存”按钮时，我已经为他们提供了ID。

如何设置与我相同的订单。

$("#get-index-button").on("click", function(){
  console.log($("#item1").index()+1);
  console.log($("#item2").index()+1);
  console.log($("#item3").index()+1);
  console.log($("#item4").index()+1);
  console.log($("#item5").index()+1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sortable">
  <li class="ui-state-default" id="item1"></span>Item 1</li>
  <li class="ui-state-default" id="item2"></span>Item 2</li>
  <li class="ui-state-default" id="item3"></span>Item 3</li>
  <li class="ui-state-default" id="item4"></span>Item 4</li>
  <li class="ui-state-default" id="item5"></span>Item 5</li>
</ul>

<button id="get-index-button">Save</button>

如果我将此列表保存为下方，那么在保存到数据库后如何设置此顺序。

Answer 1

您可以按照以下方式进行操作：

// customOrder is your order that you saved in db 
var custumOrder = ["item4", "item2", "item1", "item3"];

var ul = $("#sortable");
var items = $("#sortable li");

// Changing li according custumOrder
for (var item of custumOrder) {
  ul.append($('#' + item + ''));
}

$("#sortable").sortable();

$("#get-index-button").on("click", function() {
  // Saving order of items
  var custumOrder = $("#sortable").sortable('toArray');
  alert(custumOrder.join(','));
});

Online demo (fiddleJs)

jQuery UI可排序设置顺序

1 个答案: