用表单数据创建数组对数据进行分组和排序

Question

我有一些输入字段比我想要的数组大，这样我就可以在页面的表格中查看它们。我已经能够创建使用.serializeArray()

阵列在this fiddle我已经能够输出我的阵列，但是我想要的数据显示为它在表上确实我在小提琴，它的底部硬编码将每个ID的Tom和Jerry的所有实例分组成一行。确认该ID的所有销售价值等。我想按总销售价格列进行分类。我知道服务器端技术来做到这一点，但在这种情况下，我正在寻找一个jQuery解决方案。实现这一目标的最佳方式是什么？

Answer 1

我假设你可以依靠总是出现在四组与id[]，name[]，sales[] & price[]每个组的隐藏输入字段，否则（显然）你不能告诉哪些字段是相关的。因此，我不会使用.serializeArray()，它返回一个包含所有值的单个数组，我会将ID放在它们自己的数组中，这些名称在它们自己的数组中，等等。也许是这样的：

function showValues() { 
    function getVal(el, i) { 
     return el.value; 
    } 
    var ids = $.map($('input[name="id[]"]'), getVal), 
     names = $.map($('input[name="name[]"]'), getVal), 
     sales = $.map($('input[name="sales[]"]'), getVal), 
     prices = $.map($('input[name="price[]"]'), getVal), 
     data = {}, 
     i, 
     $results = $("#results"); 

    for (i = 0; i < ids.length; i++) { 
     if (!data[ids[i]]) { 
      // if current id is new add a record for it: 
      data[ids[i]] = { 
       "id":ids[i],"name":names[i],"sales":+sales[i],"price":+prices[i] 
      }; 
     } else { 
      // otherwise add to existing record's totals 
      data[ids[i]].sales += +sales[i]; 
      data[ids[i]].price += +prices[i]; 
     } 
    } 
    // data object now contains the details for each salesman, 
    // so turn it into an array to allow sorting: 
    data = $.map(data, function(val, key) { return val; }); 
    data.sort(function(a,b) { return a.price - b.price; }); 

    // now output table - assume there's already a table element with headings 
    $.each(data, function(i, val) { 
     var $tr = $("<tr></tr>").attr("data-id", val.id).appendTo($results); 
     $("<td></td>").text(val.name).appendTo($tr); 
     $("<td></td>").text(val.sales).appendTo($tr); 
     $("<td></td>").text(val.price).appendTo($tr); 
     $("<td></td>").text(val.price/10).appendTo($tr); 
    }); 
} 

工作演示：http://jsfiddle.net/nnnnnn/VNSam/5/

通过解释，这条线：

ids = $.map($('input[name="id[]"]'), getVal) 

...说让所有的投入与name="id[]"，并通过所产生的jQuery对象为$.map() method，这样我们就可以找回包含id值的数组 - 您可以看到getVal()只是一个简单的函数，完全可以做到这一点。我为name[]和其他字段做同样的事情。

还要注意的是销售和价格值是从输入检索时的字符串，所以我使用的unary plus operator将它们转换为数字。