1

更新:現在の並べ替え順序を表示するためにクリックされたヘッダーの横に、昇順/降順の矢印キーが適切に表示されるようにしたいと思います。私はすでにペイントで画像を作成し、それらが 12 x 10 ピクセルのようであることを確認しました。

私は多くの検索を行いましたが、ファイルをダウンロードしないと実行できないようです。プライベート サーバーから動的に入力される特定の列の値で HTML テーブルをソートするために、現在必要なコードを使用したいと思います。

すべてのデータ バインディングに Knockoutjs を使用しています。

列のヘッダーをクリックすると、並べ替えが正常に機能します。現在、1 回クリックするごとに昇順/降順になっています (1 回クリック: 降順、もう一度クリック: 昇順、もう一度クリック: 降順......)。既に持っているコードを使用して降順で並べ替えられた TimeObserved 情報が最初に入力されたテーブルを取得したい (可能であれば)。どんな助けでも大歓迎です。

注意してください：私はこれらすべてにかなり慣れていません。個人的な経験から、誰かがそれをjsfiddleに入れるように頼む可能性があることを知っています。私はjsfiddleに慣れておらず、仕事で忙しいです。今はそのような形式に変換する時間がないことと、提供されるコードは有益であり、読んで理解できるように整理されている必要があることを理解してください. ありがとうございました。

これに必要なコード スニペットは次のとおりです。

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" /></td>
    </tbody>
</table>

<script src="TableViewModel.js" type="text/javascript"></script>

/////////////////////////////////////////////// /////////////////////////////////////////////// /////////////////////////////////////////////// ///////////////////////

JavaScript ビューモデル ファイルは次のとおりです。

================================================== ================================

function Event(TimeObserved){
    var self = this;
    self.TimeObserved = TimeObserved;
}

function TableViewModel(){
    var self = this;
    self.sortColumn = "TimeObserved";
    self.sortAscending = true;

    self.SortByTimeObserved(){
        if(self.sortColumn == "TimeObserved")
            self.sortAscending = !self.sortAscending;
        else{
            self.sortColumn = "TimeObservable";
            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;
        });
    }
}

this.Model = new TableViewModel;
ko.applyBindings(this.Model);

================================================== ================================

4

3 に答える 3

2

Ko Grid を見てみましょう。私はそれがあなたに必要なものを与えるに違いない：

https://github.com/ericmbarnard/KoGrid

于 2012-04-18T16:12:17.630 に答える
0

いくつかのスクリプトで初期化できませんでした...

this.Model = new TableViewModel;
this.Model.sortAscending = false;
this.Model.SortByTimeObserved();
ko.applyBindings(this.Model);
于 2012-04-18T15:17:51.723 に答える
0

私はそれを解決しました。私が使用する場合：

function getEvents(){
    $.getJSON("http://.....",
        function (data){
            $.each(data.d, function (i, item){
                handleEvent(item)
            });
        Model.SortByTimeObserved(); // <----This is what solved the problem
        }
    );
 }

the Model.SortByTimeObservable();サーバーからのアイテムを handleEvent に入力した後に追加TimeObservedし、適切な順序で注文します。ファイルのthis.Model.SortByTimeObserved();最後にある は、ViewModel.jsすべてを逆の順序で配置するだけなので必要ありません。

于 2012-04-19T14:28:17.727 に答える