【发布时间】:2012-04-24 20:58:27
【问题描述】:
编辑 2012 年 4 月 16 日:我解决了问题并让排序正常工作。我还将时区转换为它们的单字母 UTC 代码 (A-Z)。剩下的唯一事情就是让格式化程序检查夏令时,但是关于这个主题有很多。但是,如果您愿意,请随时做出贡献,这将是最受欢迎的。感谢大家帮助我实现目标。
EDIT2 2012 年 4 月 16 日:我解决了!!由于日期已经在 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.
================================================ ================================ EDIT2:
已纠正排序错误,我不小心忘记重命名复制的排序函数之一,因此导致冲突。我仍然无法弄清楚如何让桌子恢复到原来的顺序。如果有人可以查看我制作的排序功能并向我展示我需要做什么或更改,将不胜感激。
我也无法让删除功能正常工作。它以某种方式导致冲突,因为当我将它包含在表中时,来自服务器的数据没有填充表。
编辑: 我设法找到一种“快速而肮脏”的方法来对单个列进行排序。它是这样的:
//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,以此类推,以针对函数的每个不同副本);有些行没有正确排序。但是,如果我只保留这一个功能而没有对其他列的任何副本,它就可以正常工作。
**我还需要将表格恢复到原始顺序的能力。现在我将这个函数绑定到表中的 Column1 标题。如果我单击一次,它将按降序排列,如果我再次单击标题;它将表格按升序排列(当然根据 Column1 的信息)。现在的问题是,如果我第三次单击,它将表格恢复为其默认(原始)顺序。
【问题讨论】:
-
你能提供一个你的问题的 jsfiddle。
-
我会假设 jsfiddle 就像提琴手(如果我错了请纠正我),不幸的是我不能,因为服务器是私有的。
-
如果你不能有礼貌地做一个快速的谷歌搜索并找出 jsfiddle 是什么,我会假设你还没有对你的问题进行研究。
-
呃哇,抱歉,我没用谷歌搜索我没用过的东西。我很忙,不必(也不应该)立即学习使用它,尤其是当我提供了我使用的大部分代码时。我正在使用 eclipse 并从一个 php 项目开始,但取出了所有 php 段,因此它只是一个与 javascript 文件(View 和 ViewModel)绑定的 html 文件。我确实搜索了这个主题,但没有找到我真正可以使用或理解或与我具体所做的事情相关的内容。
-
我所说的只是找出它是什么......我并没有说你必须实际学习它,使用它等等,但你可以在大约相同的时间内找出它的内容你写关于假设它是什么。另外,您无需为自己的忙碌找借口。
标签: javascript html sorting knockout.js