用表單數據創建數組對數據進行分組和排序

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將它們轉換爲數字。