Question

我想生成一个由Java servlet生成的巨大表，并作为ajax响应发送给客户端。我的表格单元格是

<td style="background-color:blue;border-color:yellow;" onClick=tableClick(this)>value1</td>
<td style="background-color:red;border-color:cyan" onClick=tableClick(this)>value2</td>

假设我们有一个包含30行的表格，而40个cols则完全是ca. 1000 cels。当我将这个字符串从java发送到浏览器时，我将使用很多网络资源，并且客户端的连接能力很差，因此必须最小化从java发送的内容。首先我用颜色名称缓存颜色名称 c1：蓝色，c2：黄色，c3：红色，c4：青色

在接收方，设备是移动设备或ipads或平板电脑，因此CPU工作量也很重要。性能动态生成表的最佳方法是什么？如何注册行动？怎么设置颜色？

选项1： 使用json-notation，例如

 { {'c1','c2','value1'},{'c3','c4','value2'}..

填充包含所有单元格的大字符串，并仅使用append设置为表格。

 // iterate in the json array and fetch the corresponding background color
 var bgcolor = extractFromJson(row,col);
 tablestring += "<td onclick=tableClick(this) style='background-color:' + bgcolor + ';border-color:' + brcolor + '>cellvalue</td>";

 // once we have all the cells, then set to the table
 $('#mytable').append(tablestring);

选项：2 发送一个空模板以填充接收器

爪哇： String tableString; bg是背景颜色的属性，br是边框颜色的属性

tableString += '<td bg=c1 br=c4>cellvalue</td>';

在浏览器端，将此表字符串设置为表容器

$('#mytable').append(tablestring);
// register actions and set colors
$('#mytable').find('td').each(funtction() {
     $(this).on('click', function () { tableClick($(this)[0]); });
     $(this).style('background-color', getColor($(this).attr("bg")));
     $(this).style('border-color', getColor($(this).attr("br")));

Answer 1

选项1将是更好的方法.DOM操作通常非常慢。在第一个选项中，您将创建一个字符串，然后最后追加一次。另一方面，在选项2中，您正在为每一行执行DOM操作，这使其效率低下。我相信选项1更好。

Answer 2

关于您的事件处理，您应该使用event delegation。而不是每行处理程序，您应该有一个处理程序。在jQuery中：

 $('#mytable').parent().on('click', 'td', function(ev) {
     tableClick($(this)[0]);
 });

将脚本与文档结构（DOM创建）混合起来有很多原因（对于网页设计师来说很糟糕，难以维护，关注点混合，客户端很重要等等）。

因此，应在服务器上准备DOM创建。由于您使用的是Java，因此我没有理由不使用某些服务器端技术。生成HTML（手动，JSP，Facelets，Velocity，...）。 这会让客户的工作变得更轻松。

如果不可能，at least use DOM API（as stated in the other answer）。 您应避免使用基于字符串的创建 ..

Answer 3

你应该像这样循环你的json

for(var i = 0; i < json.length; i++){
    $('<td/>').style({
        backgroundColor: getColor(json[i][0]),
        border: getColor(json[i][1])
    })
    .html(json[i][2])
    .click(function(){
        tableClick($(this)[0]);
    }).appendTo("#mytable");
}

Jquery性能动态创建巨大的表

3 个答案: