javascript - 使用从服务器动态填充的信息对 HTML 表进行排序

Question

2012 年 4 月 16 日编辑:我解决了问题并使排序工作正常。我还将时区转换为一个字母的 UTC 代码 (A-Z)。剩下的唯一事情就是让格式化程序检查夏令时，但是关于这个主题的内容很多。但是，如果你愿意，请随意贡献，这将是最受欢迎的。感谢大家帮助我实现目标。

EDIT2 4/16/2012:我解决了!!由于日期已经在 UTC 中，我正在做一些不必要的转换，这些转换产生了一些冲突/奇怪的结果。这个问题被认为已解决。感谢所有提供帮助的人。

我正在使用 knockoutjs 创建一个从我的服务器动态提取信息的小部件(html/javascript 中的表)。我坚持使用排序方法。我已经制作并下载了不同版本的表格排序方法，但它们都会使从服务器拉取的初始数据消失。他们将表格视为无法编辑的信息；所以似乎与我的表有冲突，因为我需要使所有信息都可以编辑。

Right now in my ViewModel.js file I have:

Event(column1,column2,column3,...columnN){
    var self = this;
    self.column1 = column1;
    self.column2 = column2;
    .
    .
}

function ViewModel(){
    var self= this;
    self.rows = ko.observableArray([]);

    self.addRow = function(){
        self.rows.push("","",.......);
    }

    //THIS REMOVE FUNCTION DOESN'T WORK
    self.removeRow = function(row)
        self.rows.remove(row);
    }

    //THIS DOESN'T WORK EITHER, a.column and b.column, the 'column would be column1, 
    //column2, etc.
    self.SortMethod = function(){
        self.items.sort(function(a,b){
            return a.column < b.column ? -1 : 1;
        });
    }
}

//navigate to the server and its info
function getEvents(){
    $get.JSON("http://......", 
      function(data){
          $.each(data.d, function(i,item){handleEvent(item)})
      }
    );
}

//this populates the rows/columns in the table with the events(info) from the server
//Here, 'Model' is a new ViewModel which is declared further below
function handleEvent(item){
    var newEvent = new Event(item.Event1, item.Event2,.....);
    this.Model.rows.push(newEvent);
}

this.Model = new ViewModel();
this.getEvents();
ko.applyBindings(this.Model);

//The HTML code just makes the table, the headers and the style of the table and I then use 
//data-bind to bind the info in the server into the appropriate block in the table.  
//And yes, I do use <script src="knockout.js"> and for all other js files I have in the
//HTML file.

The HTML is basically this:

title
meta
scripts
table style
table
headers <tr><td>Column1Header</td><td>Column2Header</td>.....</tr>
table body
    Example line from table's body: <td><input data-bind = "value: column1" /><td>
    buttons (for adding a row and another button for sorting the array)

 //I think it would be better to get rid of the sorting button and make it so if you click on 
//the table headers, you'll sort the table according to that header's column's information.  

============================================= =============================== 编辑2:

已更正排序错误，我不小心忘记重命名其中一个复制的排序函数，因此导致了冲突。我仍然无法弄清楚如何让 table 恢复到原来的顺序。如果有人可以查看我制作的排序功能并告诉我需要做什么或更改它，将不胜感激。

我也无法使删除功能正常工作。它以某种方式引起了冲突，因为当我将它包含在表中时，来自服务器的数据没有填充表。

编辑: 我设法找出一种“快速而肮脏”的方法来对单个列进行排序。它是这样的:

//After the line: self.rows = ko.observableArray([]); I continued with:
self.sortColumn = "Column1";
self.sortAscending = true;

self.SortColumn1 = function (){
    if(self.sortColumn == "Column1")
        self.sortAscending = !self.sortAscending;
    else{
        self.sortColumn = "Column1";
        self.sortAscending = true;
    }
    self.rows.sort(function(a,b){
        if(self.sortAscending == true)
            return a.Column1 < b.Column1 ? -1 : 1;
        else
            return a.Column1 > b.Column1 ? -1 : 1;
    });
}

但是，如果我为所有其他列复制此代码(将所有 Column1 更改为 Column2 和 3 等等，对于函数的每个不同副本)；有些行没有正确排序。但是，如果我只保留这个函数而不向其他列复制任何副本，它就可以正常工作。

**我还需要能够将表​​格恢复到原来的顺序。现在我将这个函数绑定(bind)到表中的 Column1 标题。如果我点击一次，它会按降序排列，如果我再次点击标题；它将表格按升序排列(当然根据 Column1 的信息)。现在的问题是，如果我第三次单击它，它会将表恢复为默认(原始)顺序。

Answer 1

我解决了!!由于日期已经在 UTC 中，我正在做一些不必要的转换，这些转换产生了一些冲突/奇怪的结果。这个问题被认为已解决。感谢所有提供帮助的人。