Question

我试图弄清楚如何将自定义数组传递给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，名称成为显示部分。然后在某些保存按钮上，我想检索已排序的数组。有人可以告诉我如何实现这一目标。

这是Fiddle Link

谢谢

Answer 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)

Answer 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>

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

2 个答案: