0

ページのテーブルに表示できるように、配列として必要な入力フィールドがいくつかあります。.serializeArray()を使用して配列を作成できました

このフィドルでは、配列を出力できましたが、フィドルの下部にハードコーディングしたテーブルに表示されるようにデータを表示したいので、トムとジェリーのすべてのインスタンスをIDごとに1行にグループ化します. そのIDなどのすべての販売値を累積します。そして、販売価格の合計列で並べ替えたいと思います。これを行うためのサーバー側の手法を認識していますが、この場合は jquery ソリューションを探しています。これを達成するための最良の方法は何ですか?

4

1 に答える 1

1

id[]非表示の入力フィールドは常に, name[], sales[]&でグループごとに 4 つのグループで表示されることに頼ることができると思います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()メソッドに渡して、id 値だけを含む配列を取得できるようにgetVal()します。まさにそれを行う単純な関数であることがわかります。name[]および他のフィールドについても同じことを行います。

また、入力から取得したときの sales 値と price 値は文字列であるため、単項プラス演算子を使用して数値に変換していることにも注意してください。

于 2012-08-05T03:06:37.433 に答える