2012年4月16日編集:問題を修正し、並べ替えが適切に機能するようにしました。また、タイムゾーンを1文字のUTCコード(AZ)に変換しました。残っているのは、フォーマッターに夏時間をチェックさせることだけですが、そのテーマについてはたくさんあります。ただし、ご希望の場合はお気軽にご協力ください。目標を達成するために私を助けてくれてありがとう。
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.
================================================== ============================ EDIT2:
並べ替えエラーが修正されました。コピーした並べ替え関数の1つを誤って名前変更し忘れたため、競合が発生していました。テーブルを元の順序に戻す方法をまだ理解できていません。誰かが私が作ったソート機能を見て、私が何をする必要があるか、または変更する必要があるかを教えてくれるなら、それは大いにありがたいです。
また、削除機能を正しく機能させることができませんでした。テーブルに含めると、サーバーからのデータがテーブルに入力されないため、何らかの形で競合が発生しています。
編集:私は、個々の列の並べ替えを取得するための「迅速で汚い」方法を理解することができました。これは次のようになります。
//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に変更するなど)。一部の行が正しくソートされていません。ただし、他の列へのコピーなしでこの1つの関数だけを保持すると、正常に機能します。
**テーブルを元の順序に戻す機能も必要です。現在、この1つの関数をテーブルのColumn1ヘッダーにバインドしています。一度クリックすると降順になり、もう一度ヘッダーをクリックすると; テーブルを昇順で配置します(もちろん、Column1の情報に従います)。ここで問題となるのは、3回クリックすると、テーブルがデフォルトの(元の)順序に復元されるようにすることです。