更新:对不起,忘记包含一些代码(掌心)。我将它包含在提供的初始代码中,所以一切都会很清楚。我对这些东西真的很陌生,所以请原谅我现在没有时间学习 jsfiddle(虽然我知道它是什么并且做了什么)。
我已经发现每次表格更新时排序切换的问题。我放入代码中的sorting() 函数是新的并且调用method.sorting(); getEvents(method) 函数内部解决了这个问题。但是,我仍然坚持刷新按钮的概念。
我注意到但还没有弄清楚如何解决的另一个问题是,当我加载页面时,我必须等待第一个 setInterval 开始,直到表格填充。我该如何解决这个问题,以便在页面最初加载时,它会立即加载数据,而无需在 setInterval 内等待指定的时间?
最后一个问题:当表自动更新时,使用 addRow() 函数添加的任何行都会消失,因为它们不是来自服务器的信息的一部分(不,我不能将行填充到服务器); 如何使自动更新保留添加的行,而不必将添加的行更新到服务器?
$.getJSON(http://.....)
我有一个 HTML 表,它使用 knockoutjs 使用该方法从服务器动态地将数据绑定到列中。我希望能够创建一个刷新按钮来刷新/更新表格 - 并且只有表格(IE 不刷新整个页面)。
就像现在一样,表格使用setInterval()
js 文件底部的函数进行更新,但会不断切换列排序。我不知道如何阻止这种情况。
这是此操作所需的代码片段:
HTML 文件:
<table border="6" id="widget"><thead>
<tr>
<th><a href=#" data-bind="click: SortByTimeObserved">TimeObserved</a></th>
</tr></thead>
<tbody data-bind="foreach: rows">
<td><input data-bind="value: TimeObserved, valueUpdate: 'change' " /></td>
</tbody>
</table>
<div>
<button date-bind="click: addRow, enable: rows()">Add Row</button>
</div>
<script src="TableViewModel.js" type="text/javascript"></script>
继承人的 javascript 视图模型文件:
function Event(TimeObserved){
var self = this;
self.TimeObserved = TimeObserved;
}
function TableViewModel(){
var self = this;
self.sortColumn = ko.observable("TimeObserved");
self.sortAscending = ko.observable(true);
self.addRow = function(){
self.rows.push(new Event(""));
}
self.SortByTimeObserved(){
if(self.sortColumn == "TimeObserved")
self.sortAscending = !self.sortAscending;
else{
self.sortColumn = "TimeObserved";
self.sortAscending = true;
}
self.rows.sort(function(a,b){
if(self.sortAscending == true)
for(self.TimeObserved in self.rows)
return a.TimeObserved > b.TimeObserved ? -1 : 1;
else
return a.TimeObserved < b.TimeObserved ? -1 : 1;
});
}
self.sorting = function(){
if(self.sortColumn() = "TimeObserved"){
self.rows.sort(function(a,b){
if(self.sortAscending() == true)
for(self.TimeObserved in self.rows)
return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0;
else
return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0;
}
}
}
//Access the server and pulls the info from it. I also apply my sorting() method to initially sort the info here.
function getEvents(model){
$.getJSON("http://mywebpage.com",
function (data){
model.rows([]);
$.each(data.d, function(i,item){
hendleEvent(item)
});
model.sorting();
}
);
}
//Populates the rows of the table with the info from the server I.E. item."infoIwant"
function handleEvent(item){
var newEvent = new Event(item.TimeObserved);
this.Model.rows.push(newEvent);
}
this.Model = new TableViewModel();
var eventInterval = setInterval(function(){
getEvents(this.Model);
}, 5000);
ko.applyBindings(this.Model);