使用基于服务器数据的Jquery创建表单的最有效方式 [英] Most efficient way to create form with Jquery based on server data

问题描述

我有一个数据库webmethod，我通过jquery ajax调用。这将从服务器返回一组数据对象。对于每个数据对象，我想填充一个表单，也许有几十个字段。

生成和填充这些表单的最有效方法是什么？

b
$ b

现在，我在每个记录的javascript代码中创建一个html字符串，然后将其添加到页面中。然后我添加一些事件到新的元素。

这在firefox中可以正常工作，对于一个由6个元素组成的数组总共需要700 ms，对于30个数组元素。但是，这是我公司的内部应用程序，客户只能在他们的机器上使用IE8。在IE8中，这需要2-10秒！对于和长度为6和47秒的数组，它实际上能够为一个长度为30的数组完成一次。不知道@＃$％IE8正在做什么，但无论如何...我需要更高效的东西似乎。 ...

谢谢！

更多信息：

编辑：我做的第一件事是：

  $（＃approvalContainer）。empty（）; 
  

Web方法签名：

  [WebMethod] 
 public List< User> ContractorApprovals（）
  

所以我调用方法，然后用数据做到这一点：

  for（var i = 0; i< data.length; i ++）{
 displayUserResult（＃approvalContainer，data [i ]，false）; 
} 
 formEvents（＃approvalContainer）; 
 $（＃approvalContainer）。show（slow）; 
  

displayUserResult如下所示：

  var div =< div style = \width：695px \class = ...........
 fillForm（div，data） 
 $（＃approvalContainer）。append（div）
  

点击事件，创建样式按钮并添加水印。

fillForm做这样的事情：

 < 。code> $（用户窗体）.find（ 表单网页的userName）文本（userObject._web._userName）; 
  

其中userForm是在displayUserResult函数中创建的div，userObject是数组中的一个对象

请让我知道您是否需要更多信息。

解决方案

你正在做太多的DOM操作。您的每个 .append 和 .find 和 .text 循环使其变慢。

最有效的方法是构建一个完整的HTML字符串并将追加一次。我不打算使用 displayUserResult 函数，只是修改处理数据的函数：

  var div =< div style = \width：695px\class = ...........，
 html = ; 
 for（var i = 0; i< data.length; i ++）{
 //继续添加到同一个html字符串
 html + = div + data [i] ._ web ._userName +< / div>; 
} 
 //在循环之后，一次性替换容器中的全部HTML内容：
 $（＃approvalContainer）。html（html）; 
  

然而，尽管这很快，但请注意，只有在 _userName 不包含特殊字符，或已经被HTML转义。

I have a database webmethod that I call via Jquery ajax. This returns an array of data objects from the server. For each data object I want to populate a form with maybe a couple dozen fields.

What is the most efficient way to generate and populate these forms.

Right now, I create a string of the html in my javascript code for each record and then add it to the page. Then I add some events to the new elements.

This works OK in firefox, about 700 ms total for an array of 6 elements, and 4500 ms for an array of 30 elements. However, this is an internal app for my company, and the clients can only use IE8 on their machines. In IE8, this takes 2-10 SECONDS! for and array of length 6 and 47 seconds the one time it was actually able to complete for an array of length 30. Not sure what the @#$% IE8 is doing, but anyways... I need something more efficient it seems...

Thanks!

MORE INFO:

Edit: first thing I do is:

$("#approvalContainer").empty();

Web method signature:

[WebMethod]
    public List<User> ContractorApprovals()

So I call the method and then do this with the data:

for (var i = 0; i < data.length; i++) {
            displayUserResult("#approvalContainer", data[i], false);
        }
        formEvents("#approvalContainer");
        $("#approvalContainer").show("slow");

displayUserResult looks like this:

var div = "<div style=\"width:695px\" class=..........."
fillForm(div,data)
$("#approvalContainer").append(div)

formEvents does things like add click events, create styles buttons and add watermarks.

fillForm does stuff like this:

$(userForm).find(".form-web-userName").text(userObject._web._userName);

where userForm is the div created in the displayUserResult function, and userObject is one of the objects in the array returned by the ajax call.

Please let me know if you need more information.

解决方案

You are doing too much DOM manipulation. Every .append and .find and .text inside your loop makes it slower.

The most efficient way is to build an entire HTML string and append that once. I'm not going to bother with the displayUserResult function, and just modify your function that handles the data:

var div = "<div style=\"width:695px\" class=...........",
    html = "";
for (var i = 0; i < data.length; i++) {
     // Keep adding on to the same html string
     html += div + data[i]._web._userName + "</div>";
}
// After the loop, replace the entire HTML contents of the container in one go:
$("#approvalContainer").html(html);

However, while this is fast, note that this is only appropriate if _userName doesn't contain special characters, or is already HTML escaped.

这篇关于使用基于服务器数据的Jquery创建表单的最有效方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！