从数组数据构建可排序的 JQuery UI答案

【问题标题】：Build JQuery UI Sortable from array data从数组数据构建可排序的 JQuery UI
【发布时间】：2018-07-31 21:46:21
【问题描述】：

我试图弄清楚如何将我的自定义数组传递给 JQuery UI 可排序小部件，这样我就可以拥有由某些逻辑创建的 HTML 元素，而不是对其进行硬编码，但我似乎找不到任何东西。为了取回数据，我找到了一个 toArray 方法，但这似乎是一个空数组。下面是我的代码。

<div class="demo">
    <ul id="sortable">

    </ul>    
</div>

$("#sortable").sortable({   
});
$("#sortable").disableSelection();    
var data = [];    
function GetData()
{
   for (i = 0; i < 10; i++)
   {
      data.push(new CustomObject(i,i));   
   }
}    
var CustomObject = function(name,id)
{
   this.name = name;
   this.id = id;    
}

我想要做的是使用数据数组创建可排序的数据，因此 id 成为 id 和 name 成为显示部分。然后在某个保存按钮上，我想检索已排序的数组。有人可以告诉我如何实现这一目标。

这里是Fiddle Link

谢谢

【问题讨论】：

我能够按照这篇文章stackoverflow.com/questions/41475378/…的逻辑来计算它
如果我的回答对您有帮助，请接受并投赞成票，以帮助其他程序员在遇到相同问题时找到解决方案。大多数程序员看到接受或赞成的答案。

标签： javascript jquery jquery-ui jquery-plugins jquery-ui-sortable

【解决方案1】：

你可以这样做：

for (var item of data) {
  // Create new li
  let li = $(document.createElement("li"))
    .text(item.name) // Set text by name of item
    .attr("id", item.id); // Set id by id of item 

  // Append li to ul  
  $("#sortable").append(li);
}

Online demo (jsFiddle)

【讨论】：

【解决方案2】：

要检索排序后的数组，您可以使用 .sortable("toArray") 方法，如下所示：

  $(function() {
  
	  function getData()
    {
    	var data = [];
       for (i = 0; i < 10; i++)
       {
          data.push(new CustomObject(i,i));   
       }
       return data;
    }
    
    var CustomObject = function(name,id)
    {
       this.name = name;
       this.id = id;    
    }
    
		$.each(getData(), function(i, item){
    	$('#sortable').append('<li data-id="' + item.id + '" class="ui-state-default">' + item.name + '</li>');
		});
    
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
    
    $("#save").on('click', function() {
    	var sortedIDs = $( "#sortable" ).sortable( "toArray", {"attribute": "data-id"});
      console.log(sortedIDs);
    });
  });

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="demo">
  <ul id="sortable"></ul>
  <button id="save">Save</button>
</div>

【讨论】：