[英]How to make faster UI updation in jquery
我有一張表,用於顯示用戶選擇的日期范圍的生產預測。 該表由40列和約1000行組成。
我已對某些列進行了編輯,以更改計划。 此更改將在服務器中使用ajax和json報告(哪個屬性和值是什么)。 服務器將重新計算,並將表中的更改以json格式[列號,行號,值]報告給客戶端。
我遍歷json數組並更新表,如
$("#GridViewPlan tr:eq(" + (myRow) + ") td:eq(" + myCol + ")").text(val);
但是我的問題是for循環(ui更新)中的上述句子要花時間
如何改善這種架構? 是否有類似jquery的庫可用於快速UI更新
您可以使用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>
這是小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.