Question

我在html表中有一个复选框。使用knockoutjs，我将我的html表绑定到json对象。直到现在一切正常。但是当我应用tablesorter时，先前检查的复选框将被取消选中。它发生在从下面列出的代码调用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 });
    };

Answer 1

如果您使用的是原始的tablesorter，请尝试this answer。*

中的代码

如果您使用我的fork of 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不可用。

应用表格分类器后，复选框无法保持其状态

1 个答案: