用表单数据创建数组，对数据进行分组和排序 [英] create array with form data which groups and sorts data

问题描述

我有一些不需要的输入字段作为数组，这样我就可以在页面上的表中查看它们.我已经能够使用 .serializeArray()

I have some input fields than I want as an array so that I can view them in a table on my page. I have been able to create an array using .serializeArray()

在此小提琴中，我已经能够输出数组，但是我希望数据能够输出就像我在小提琴底部进行硬编码的表中那样，在该表中，每个id将Tom和Jerry的所有实例分组为一行.对该ID等的所有销售值进行累加.我想按总销售价格"列对其进行排序.我知道服务器端技术可以做到这一点，但是在这种情况下，我正在寻找一种jQuery解决方案.实现此目的的最佳方法是什么?

In this fiddle I have been able to output my array however I want the data to appear as it does in the table I have hard coded at the bottom of the fiddle, where it groups all the instances of Tom and Jerry into one row per id. Accumalating all sales values for that id etc. And I want to sort it by the total sale price column. I am aware of server side techniques to do this however in this case I am looking for a jquery solution. What is the best way to acheive this?

推荐答案

我假设您可以依靠总是以四个为一组且以id[]，name[]，sales[]&对于每个组，按price[]键，否则(显然)您无法分辨出哪些字段是相关的.因此，与其使用.serializeArray()(它返回具有所有值的单个数组)，不如将ids放在自己的数组中，将名称放在自己的数组中，依此类推.也许是这样的:

I'm assuming you can rely on the hidden input fields always appearing in groups of four with an id[], name[], sales[] & price[] for each group, otherwise (obviously) you can't tell which fields are related. So rather than use .serializeArray(), which returns a single array with all the values, I'd put the ids in their own array, the names in their own, and so forth. Perhaps something like this:

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()方法，以便我们可以返回仅包含id值的数组-您可以看到getVal()只是一个简单的函数，它可以完成该操作.我对name[]和其他字段执行相同的操作.

...says to get all inputs with name="id[]", and pass the resulting jQuery object to the $.map() method so that we can get back an array containing just the id values - you can see that getVal() is just a simple function that does exactly that. I do the same thing for name[] and the other fields.

还请注意，从输入中检索时，销售和价格值是字符串，因此我使用的是

Note also that the sales and price values are strings when retrieved from the inputs, so I'm using the unary plus operator to convert them to numbers.

这篇关于用表单数据创建数组，对数据进行分组和排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！