5

savesort ウィジェットで tablesorter を使用しようとしています。テーブルは knokout によって取り込まれます。

テーブルに初めてデータが入力されると、正しい量の行が取得され、並べ替えが記憶されます。次に、ajax とノックアウト配列へのバインドを使用して、テーブルにデータを再入力します。データは 2 倍になりますが、ノックアウト (正しく) は半分のデータしか追跡しません。

これまでのところ、このメソッドで保存された並べ替えを適用するまで追跡しました。

self.tablesorter = function () {
                        $('table.tablesorterTranslation').trigger("update");
                        setTimeout(function () {
                            var sl = $.tablesorter.storage($('table.tablesorterTranslation'), 'tablesorter-savesort');
                            var sortList = (sl && sl.hasOwnProperty('sortList') && $.isArray(sl.sortList)) ? sl.sortList : '';
                            if (sortList && sortList.length > 0) {
                                // update sort change
                                $('table.tablesorterTranslation').trigger("sorton", [sortList]);
                            }
                        }, 1000);
                        return false;
                    };

このメソッドは、ノックアウト ポストアクション バインディングによって呼び出されます。

メソッドが呼び出される前は、ノックアウト配列内のすべての項目に対して 1 つの tablerow があり、postaction 後は 2 つあり、1 つはノックアウトによって追跡され、もう 1 つは tablesorter によって追加されたようです。

これはテーブルソーターのキャッシュ値によるものですか?それをきれいにする方法はありますか?

html:

    <table class="tablesorterTranslation" data-bind="visible: contents().length > 0">
                <colgroup>
                    <col class="referencenumber"/>
                    <col class="title"/>
                </colgroup>
                <thead>
                    <tr>
                        <th class="referencenumber">Ref number</th>
                        <th class="title">Title</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: contents, postAction: tablesorter(), visible: contents().length > 0">
                    <tr>
                        <td class="referencenumber">
                            <span data-bind="text: contentReferenceNumber"></span>
                        </td>
                        <td class="title">
                            <a data-bind="attr: {href: previewUrl, title: previewTitle}, click: previewpopup" class="preview_translation"><%: AdminResources.Menu_Preview %></a>
                      </td>
                </tr>
            </tbody>
        </table>

テーブルを再作成する ajax:

self.setContentList = function () {
                        if ($('#LanguageIdNameValuePairs option').length > 0) {
                            self.contents.removeAll();
                            self.loading(true);
                            $.ajax('<%= Url.Action("GetContentList", "TranslateContentMenu") %>',
                                {
                                    dataType: 'json',
                                    data: {
                                        languageId: $('#LanguageIdNameValuePairs').val(),
                                        page: self.page
                                    },
                                    success: function (allData) {
                                        var mappedContent = $.map(allData, function (item) { return new ContentViewModel(item); });
                                        self.loading(false);
                                        self.contents(mappedContent);
                                    }
                                });
                        } else {
                            self.contents(new Array());
                        }
                    };

コンテンツビューモデル:

(function (ko) {
    PODIUM.translation.ContentViewModel = function(data) {
        this.contentReferenceId = ko.observable(data.contentReferenceId);
        this.contentName = data.contentName;
        this.previewUrl = ko.observable(data.previewUrl);
        this.previewTitle = ko.observable(data.previewTitle);
        this.publishTitle = ko.observable(data.publishTitle);
        this.contentReferenceNumber = ko.observable(data.contentReferenceNumber);
    };
}(ko));

最後に、テーブルにデータを入力し、savesort を使用して tablesort を定義します (savesort が問題だと思います)。

       $('#OptionsMenu').change(function () {
            viewModel.setContentList();
        });
        $('table.tablesorterTranslation').tablesorter({
            widgets: ["saveSort"],
            widgetOptions: {}
        });

いくつかの値を持つ選択リストがあり、これが変更されると、サーバーから新しい値を取得してテーブルを再作成します。これは古い値を記憶する場所ですが、テーブルを「クリーン」にして最初からやり直したいです。

4

1 に答える 1

2

私は自分で答えを見つけましたが、私が望んでいたものではありませんでした。

基本的にノックアウトを使っているので、ビュー自体を変更するのではなく、ビューモデルを変更することになっています。そこで、配列を並べ替えて、残りの魔法をノックアウトに任せてみました。

tablesorter の痕跡をすべて削除することから始めました (スタイルシートで既に使用していたため、テーブルの css クラスを除く)。

次に、このメソッドを追加しました：

            self.sortContents = function (element, sortProperty) {
                var elem = $(element);
                var direction = (elem.hasClass('headerSortDown')) ? 'headerSortUp' : 'headerSortDown';
                var selector = $.trim($(element).attr('class').replace('header', '').replace('headerSortUp', '').replace('headerSortDown', ''));
                if (direction == 'headerSortUp') {
                    self.filterStorage.updateSortFilter(selector, sortProperty);
                    self.contents.sort(function(left, right) {
                        return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] > right[sortProperty] ? -1 : 1);
                    });
                    elem.removeClass('headerSortDown');
                    elem.addClass('headerSortUp');
                } else {
                    self.filterStorage.updateSortFilter(selector, sortProperty);
                    self.contents.sort(function (left, right) {
                        return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] < right[sortProperty] ? -1 : 1);
                    });
                    elem.removeClass('headerSortUp');
                    elem.addClass('headerSortDown');
                }
            };

tablesort プラグインと同じ css クラスを使用していることに注意してください。これは、tablesorter がアプリケーションの他の場所で既に使用されており、それらのクラスの css が既に存在するためです。

テーブルのヘッダーを次のように変更しました。

<th class="title header" data-bind="click: function(data, event){ return sortContents($(event.target), 'contentName')}"><%: AdminResources.ContentOverview_Title %></th>

それから、私はこの混乱の中で起きて、ソート状態を保存しようとしたので、これのために何かを考え出さなければなりませんでした. そこで、to メソッド、update、および get を使用して新しいクラスを作成しました。これにより、ソートするヘッダーと方向が保存されます。

function getSortFilter() {
    var cookie = $.cookie(tableSortedByCookie);
    return JSON.parse(cookie);
}
function updateSortFilter(selector, property) {
    $.cookie(tableSortedByCookie, null);
    $.cookie(tableSortedByCookie, JSON.stringify({ selector: selector, property: property }), { path: '/' });
}

sortcontents メソッドで update の使用法を確認できます。(このメソッドは、テーブルを含むページのビューモデルにあります)。

次に、これを ajax 成功メソッドの下部に追加しました。

var tableSortCookie = self.filterStorage.getSortFilter();
if (tableSortCookie != null && tableSortCookie.selector != null) {
   var header = $('.tablesorterTranslation th.' + tableSortCookie.selector);
   self.sortContents(header, tableSortCookie.property);
}

そして、代わりにノックアウトを使用してデータをソートし、状態を保存し、データを変更するときに状態をロードして、ページを更新することができました。

于 2013-01-04T12:19:10.583 に答える