如何在jQuery中更快地更新UI

Question

我有一张表，用于显示用户选择的日期范围的生产预测。 该表由40列和约1000行组成。

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

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

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

但是我的问题是for循环（ui更新）中的上述句子要花时间

如何改善这种架构？ 是否有类似jquery的库可用于快速UI更新

Answer 1

您可以使用KnockoutJS另一个使用MVVM模式的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>

这是小提琴