6

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回クリックすると、テーブルがデフォルトの(元の)順序に復元されるようにすることです。

4

2 に答える 2

0

このようなものを実装してみませんか?(並べ替えには列ヘッダーをクリックします):

function ViewModel(){
    var self = this;
    
    self.rows = ko.observableArray([]);
    self.newOne = {
        firstName:ko.observable(""),
        lastName:ko.observable("")
    };
    
    self.currentSort = ko.observable("");
    
    self.addNew = function() {
        self.addRow(self.newOne.firstName(), self.newOne.lastName());
        self.newOne.firstName("");
        self.newOne.lastName("");
    }

    self.addRow = function(firstName, lastName) {
        self.rows.push(
            {
                firstName: firstName.capitalize(),
                lastName:lastName.capitalize()
            });
    
        if(self.currentSort() != "")
            self.sortBy(self.currentSort());
    };

    self.removeRow = function() {
        self.rows.remove(this);
    };
    
    self.sortBy = function(sortField) {
        sortFunc = self.defaultSorter;
        
        self.rows.sort(function(left, right) {
            return sortFunc(left[sortField], right[sortField]);
        });
       
        self.currentSort(sortField);
    };
    
    self.defaultSorter = function(left, right) {
        if(left > right)
            return 1;
        
        return left < right ? -1 : 0;
    };
};
    
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
};


this.Model = new ViewModel();
this.Model.addRow("Any", "Coder");
this.Model.addRow("Some", "Another");
this.Model.addRow("Nice", "Guy");
this.Model.addRow("Cool", "One");
ko.applyBindings(this.Model);
th, td
{
    border: 1px solid gray;
    padding: 0px 2px;
}

.sort-by
{
    cursor: pointer;
}

button
{
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>

<div>
    current sorting: <span data-bind="text: currentSort"></span>
    <table>
    <thead>
        <tr>
            <th class="sort-by" data-bind="click: sortBy.bind($data, 'firstName')">First name</th>
            <th class="sort-by" data-bind="click: sortBy.bind($data, 'lastName')">Last name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
            <td><button href='#' data-bind="click: $parent.removeRow">-</button></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><input data-bind="value: newOne.firstName" /></td>
            <td><input data-bind="value: newOne.lastName" /></td>
            <td><button data-bind="click: addNew">+</button></td>
        </tr>        
    </tfoot>
    </table>
</div>

于 2012-04-16T12:49:19.677 に答える
0

解決しました!! 日付がすでにUTCになっているため、不必要な変換を行っていたため、競合や奇妙な結果が生じていました。この質問は解決済みと見なされます。助けてくれた皆さん、ありがとうございました。

于 2012-04-19T17:31:02.453 に答える