创建仅刷新网页上 HTML 表格中的信息的 HTML 刷新按钮答案

【问题标题】：Creating HTML Refresh Button that only refreshes info in a HTML Table on webpage创建仅刷新网页上 HTML 表格中的信息的 HTML 刷新按钮
【发布时间】：2012-05-08 03:31:06
【问题描述】：

更新：抱歉，忘记包含一些代码（face-palm）。我将它包含在提供的初始代码中，所以一切都会很清楚。我对这些东西真的很陌生，所以请原谅我现在没有时间学习 jsfiddle（虽然我知道它是什么并且做了什么）。

我发现了每次表格更新时排序切换的问题。我放入代码中的sorting() 函数是新的并且调用method.sorting(); getEvents(method) 函数内部解决了这个问题。但是，我仍然停留在刷新按钮的概念上。

另一个我注意到但尚未弄清楚如何解决的问题是，当我加载页面时，我必须等待第一个 setInterval 开始，直到表格填充。我该如何解决这个问题，以便在页面最初加载时，它会立即加载数据，而无需在 setInterval 内等待指定的时间？

最后一个问题：当表自动更新时，使用 addRow() 函数添加的任何行都会消失，因为它们不是来自服务器的信息的一部分（不，我不能让这些行成为填充到服务器）；如何使自动更新保留添加的行，而不必将添加的行更新到服务器？

我有一个 HTML 表，它使用 knockoutjs 使用 $.getJSON(http://.....) 方法将数据从服务器动态绑定到列中。我希望能够创建一个刷新按钮来刷新/更新表格 - 并且只有表格（即不刷新整个页面）。

就像现在一样，表格使用 js 文件底部的 setInterval() 函数进行更新，但会不断切换列排序。我不知道如何阻止这种情况。

这是此操作所需的代码 sn-ps：

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 viewmodel 文件：

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);

【问题讨论】：

我可能错了，但代码对我来说看起来很笨拙。为清楚起见，发布fiddle。
“getEvents”函数在哪里？
@Jason 抱歉，完全忘记添加代码的某些部分。现在一切都已更新。
您找到解决问题的方法了吗？

标签： javascript html sorting knockout.js

【解决方案1】：

你应该看看淘汰映射插件：

http://knockoutjs.com/documentation/plugins-mapping.html

-- 更新

还可以了解一下 MVVM 模式

http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/

【讨论】：

@JasonMoore ：实际上我以前看过这个，但是在将它与我的项目联系起来时遇到了一些麻烦。抱歉，我对此很陌生。

【解决方案2】：

我通过使表格本身动态更新而不是依赖按钮来解决这个问题。无论如何，该信息应该是只读的，因此编辑不是要考虑的因素。我还以某种方式让它不撤消当前激活的排序。

通过将其添加到视图模型中，我将表格设置为在给定的间隔时间后更新：

var eventInterval = setInterval(function(){
    getEvents(this.Model);
), 5000); //<-- in milliseconds

【讨论】：