如何在jquery中进行更快的UI更新

我有一个表格，用于显示用户选择的日期范围的生产预测。该表包括 40列和大约1000行

我已使一些列可编辑，以便对计划进行更改。此更改将使用ajax和json在服务器中报告[哪个属性和值是多少]。服务器将重新计算并以json格式[列号，行号，值]将表值中的更改报告给客户端

我遍历json数组并更新表，如下所示

$("#GridViewPlan tr:eq(" + (myRow) + ") td:eq(" + myCol + ")").text(val);

但我的问题是上面的for循环语句（ui更新）需要时间

如何改进此体系结构？是否有类似jquery库的快速UI更新功能

您可以使用另一个使用模式的javascript库。它将使您的数据绑定更简单、更快。有关更多信息，请阅读 最酷的是你可以同时使用jQuery和KnockoutJS。对于具有大量记录的表，您可能希望启用如下分页：

HTML

<div data-bind='simpleGrid: gridViewModel'> </div>

<button data-bind='click: addItem'>
    Add item
</button>

<button data-bind='click: sortByName'>
    Sort by name
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>

添加项
按名称排序
跳转到第一页

还有javascript：

<script>
    var initialData = [
        { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
        { name: "Speedy Coyote", sales: 89, price: 190.00 },
        { name: "Furious Lizard", sales: 152, price: 25.00 },
        { name: "Indifferent Monkey", sales: 1, price: 99.95 },
        { name: "Brooding Dragon", sales: 0, price: 6350 },
        { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
        { name: "Optimistic Snail", sales: 420, price: 1.50 }
    ];

    var PagedGridModel = function(items) {
        this.items = ko.observableArray(items);

        this.addItem = function() {
            this.items.push({ name: "New item", sales: 0, price: 100 });
        };

        this.sortByName = function() {
            this.items.sort(function(a, b) {
                return a.name < b.name ? -1 : 1;
            });
        };

        this.jumpToFirstPage = function() {
            this.gridViewModel.currentPageIndex(0);
        };

        this.gridViewModel = new ko.simpleGrid.viewModel({
            data: this.items,
            columns: [
                { headerText: "Item Name", rowText: "name" },
                { headerText: "Sales Count", rowText: "sales" },
                { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
            ],
            pageSize: 4
        });
    };

    ko.applyBindings(new PagedGridModel(initialData));
</script>

var initialData=[
{名称：“旅行频繁的小猫”，销售：352只，价格：75.95}，
{名称：“快速郊狼”，销售额：89，价格：190.00}，
{名称：“愤怒的蜥蜴”，销售：152，价格：25.00}，
{名称：“无动于衷的猴子”，销售额：1，价格：99.95}，
{名称：“孵龙”，销售额：0，价格：6350}，
{名称：“独创蝌蚪”，销售：39450，价格：0.35}，
{名称：“乐观蜗牛”，销售：420，价格：1.50}
];
var PagedGridModel=功能（项目）{
this.items=ko.observearray（项目）；
this.addItem=函数（）{
this.items.push（{name:“New item”，销售：0，价格：100}）；
};
this.sortByName=函数（）{
this.items.sort（函数（a，b）{
返回a.name

---

这是

您有没有看过eg，它是一个很好的诊断工具…您是否返回网格的完整内容以进行刷新？如果是这样的话，您可以在服务器上做一些调整，并且只有在发生更改时才尝试重试。在这种情况下，您只需要刷新更新的值。我只报告更改。假设有1000个更改，则需要1000个UI更新。