可排序无序列表将其序列化然后转换为表

时间:2014-11-12 20:51:06

标签: jquery html jquery-ui

我能够获得可排序UL的序列化数据

HTML

<ul id="ul_1">
<li id="A_1">200></li>
<li id="A_2">300></li>
<li id="A_3">150></li>
</ul>

jquery的

  $("#cmdSerial").click(function (event) {

                event.preventDefault();
                var data = $("#ul_1").sortable('serialize');
                alert(data);
            });

从ul我需要得到一个像这样的表

id |Values
A_1|200
A_2|300  
A_3|150

我认为通过序列化我可以得到数据,但var数据显示为

A[]=1&A[]=2&A[]=3

编辑。从这篇文章我能够得到以下解决我的问题。

 $("#cmdSerial").click(function (event) {

                event.preventDefault();
                //create array with object. 
               var dataArray = $.map($("#formgroup_ul_1").children('li'), function (el) {
                    return { 'color': $(el).data('cube'), 'group': $(el).data('group') };

                });
               //loop array
               for (var i = 0; i < dataArray.length; i++) {
                   console.log(dataArray[i].color + ' ' + dataArray[i].group);

                   $('#mDataTable tbody').append('<tr><td>' + dataArray[i].color + ' ' + dataArray[i].group + '</td></tr>');

               }
   });

1 个答案:

答案 0 :(得分:0)

您可能希望使用可排序的 toArray 方法。

这样:

var myArray = $("#ul_1").sortable('toArray');
//=> ["A_1", "A_2", "A_3"]