флажок не может сохранить свое состояние после применения сортировщика таблиц

У меня есть флажок в таблице 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 });
    };

html jquery knockout.js tablesorter
person fcmaine    schedule 06.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы используете исходный сортировщик таблиц, попробуйте код из этого ответа.*

Если вы используете мою ветвь tablesorter, используйте этот синтаксический анализатор (демонстрация):

$.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 недоступен.
person Mottie    schedule 07.11.2012
comment
Спасибо за ответ. Я использую оригинальный tablesorter и сделал то, что было указано в ссылке. Это не сработало. А также я не сортирую свой столбец с помощью флажка. Это происходит только в IE6. Я проверил тот же код на хроме, и он работал без проблем. - person fcmaine; 12.11.2012
comment
Ах, хорошо, я был немного сбит с толку, так как опция пейджера removeRows доступна в моем форке, но не является частью оригинального плагина. Не могли бы вы предоставить демонстрацию кода или показать образец полученного HTML. Это сбивает с толку, потому что в шаблоне нет ни закрывающего </tr>, ни закрывающего </script>. - person Mottie; 13.11.2012
comment
@Mottie ... Я обновил скрипт html и Knockoutjs в вопросе, добавив закрывающие теги для tr и script. Я не мог добавить изображение моего html-результата. - person fcmaine; 13.11.2012
comment
Мне было интересно, как выглядит результирующая таблица HTML. Все ли входы остаются отключенными? Также как вызывается функция BuildResultsPage, завернута ли она в функцию готовности документа? - person Mottie; 15.11.2012
comment
Я не знаю, как поделиться своим html в виде изображения. Извини за это. HTML будет иметь флажок и правильно проверен в соответствии со значением, к которому он привязан. Но после вызова BuildTable() в результирующей HTML-таблице все флажки в этом столбце будут сняты, независимо от значения, к которому оно привязано. И да, BuildResultsPage() вызывается из функции готовности документа. - person fcmaine; 20.11.2012