0

HTMLテーブルにチェックボックスがあります。knockoutjs を使用して、html テーブルを json オブジェクトにバインドしています。今まではすべて正常に動作しています。しかし、テーブルソーターを適用すると、以前にチェックされていたチェックボックスがオフになります。Buildtable() 関数が以下のコードから呼び出された後に発生します。使用しているブラウザはIE6です。ブラウザの問題かどうかはわかりません。現在、他のブラウザにはアクセスできません。どんな助けでも大歓迎です。

ありがとう

    <div id="unassignedDiv" style="text-align:center;display:none;">
    <table class="tablesorter" id="unassignedTable">
    <thead><tr>
    <th align="center">Date</th>
    <th align="center">Rush?</th>
    </thead></tr>
    <tbody id="resultsbody" data-bind="template: { name: 'resultsTemplate', foreach: Results }"></tbody></table>

    <script id="resultsTemplate" type="text/html">
    <tr><td data-bind="text: dateneeded" align="center"></td>
    <td align="center">
    <input type="checkbox" data-bind="checked:rushindicator" disabled="disabled" />
    </td>
    </tr>
    </script>
    </div>

    //Build JsonObject
    BuildArray = function () {
           var searchjson = {
                "Results": [
                   { "dateneeded": "11/08/12", rushindicator: true },
                   { "dateneeded": "11/10/12", rushindicator: false }]};
    };


    BuildResultsPage = function () {
            $j('#unassignedDiv').show();
            var resultArray = BuildArray();
            exported.viewmodelExpanded = ko.mapping.fromJS(resultArray);
            ko.applyBindings(exported.viewmodelExpanded, $j('#unassignedDiv')[0]);        
            BuildTable(); //If this is commented, html loads checkbox with checked.
        };

    BuildTable = function () {
            $j("#unassignedTable").tablesorter({ widgets: ['zebra'], widgetZebra: { css: ["oddcolor", "evencolor"] },
                sortInitialOrder: 'desc',
                headers:
                {
                  0: { sorter: 'Date' },
                  1: { sorter: false }
                }
            }).tablesorterPager({ container: $j("#pager"), removeRows: true });
    };
4

1 に答える 1

0

元の tablesorter を使用している場合は、この回答のコードを試してください。*

tablesorter のフォークを使用している場合は、このパーサー ( demo )を使用します。

$.tablesorter.addParser({
    id: 'checkbox',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        var $t = $(table), $c = $(cell), c,

        // resort the table after the checkbox status has changed
        resort = false;

        if (!$t.hasClass('hasCheckbox')) {
            $t
            .addClass('hasCheckbox')
            // make checkbox in header set all others
            .find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
            .bind('change', function(){
                c = this.checked;
                $t.find('tbody tr td:nth-child(' + (cellIndex + 1) + ') input').each(function(){
                  this.checked = c;
                  $(this).trigger('change');
                });
            })
            .bind('mouseup', function(){
                return false;
            });
            $t.find('tbody tr').each(function(){
                $(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]').bind('change', function(){
                    $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                });
            });
        }
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr')[ c === 1 ? 'addClass' : 'removeClass' ]('checked');
        return c;
    },
    type: 'numeric'
});

$(function() {
    $('table').tablesorter({
        headers: {
            0: { sorter: 'checkbox' }
        }
    });
});​
  • このパーサーが元のプラグインで動作しない理由は、フォーマット関数パラメーターのためです - cellIndex は利用できません。
于 2012-11-07T16:11:01.823 に答える