1

いくつかのDOM変更を生成し、オブジェクトを更新するためのより効率的な方法を探してい.data()ます。

現在、データはオブジェクトの配列で提供されており、セクションで文字列を作成し、それらをテーブル本体に追加して、.dataオブジェクトを要素に追加しています。

これがスナップショットです。

for (i in data.users) {
    //Build the string
    var rowData = "<tr class=\"";
        rowData += (i%2) ? "odd":"even";
        rowData +="\">";
            rowData +="<td>";
            rowData +=data.users[i]["FirstName"];
            rowData +="</td>";
            rowData +="<td>";
            rowData +=data.users[i]["LastName"];
            rowData +="</td>";
            rowData +="<td>";
            rowData +=data.users[i]["UserName"];
            rowData +="</td>";
            //Could be many more columns
        rowData +="</tr>";

    //Change the DOM, add to the data object.
    $(rowData).appendTo("#list > table > tbody").data('ID', data.users[i]["ID"]);
}

私は、すべてのデータで1つの変更を行うのではなく、DOMをn回操作する必要があることにほとんど腹を立てています。または、バッファーがあるかのようにデータを解放することができます。また、一度に更新したいと思い.data()ます。

4

4 に答える 4

4

jQuery 1.4.3+を使用すると、data-XXX属性をノードに配置できます。これは、jQueryによってdata()そのノードのハッシュに自動的に選択されます。 

var Buffer = [];
for (i in data.users) {
    //Build the string
    Buffer.push("<tr data-ID=\"" + data.users[i]["ID"] + "\" class=\"");
    Buffer.push((i%2) ? "odd":"even");
    Buffer.push("\">");
    Buffer.push("<td>");
    Buffer.push(data.users[i]["FirstName"]);
    Buffer.push("</td>");
          // and so forth
    Buffer.push("</tr>");        
}

$("#list > table > tbody").append(Buffer.join(''));
于 2011-02-08T20:39:07.530 に答える
0

データはどこかのサーバー側のソースから来ていると思います。サーバーからJSONオブジェクト（またはXMLなど）を渡し（別名、すべての操作はサーバー側で行われます）、データをユーザーに表示するjqGridのようなものを使用してみませんか。jqGridが生成するグラフは非常に優れており、現在行っているすべての作業を行う必要はありません。

于 2011-02-08T20:32:20.310 に答える
0

jqueryテンプレートプラグインを見てください..まだベータ版ですが、とても素敵です！ http://api.jquery.com/category/plugins/templates/

于 2011-02-08T20:36:05.830 に答える
0

私はその情報をDOMにまったく入れないことに投票します。JSモデルを使用してそのデータを管理し、必要に応じてクエリを実行します。これにより、DOMが整理され、セマンティックマークアップとそれをサポート/駆動するデータが適切かつ効率的に分離されます。MVC ftw！

于 2013-05-09T18:24:25.303 に答える