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"]);
}

我主要对不得不操作 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

我假设数据来自某处的某个服务器端源。为什么不使用jqGrid 之类的东西，在其中您将从服务器（AKA，所有操作都在服务器端完成）传递 JSON 对象（或 XML 等），然后将数据显示给用户。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 回答