ช่องทำเครื่องหมายไม่สามารถคงสถานะไว้ได้หลังจากใช้ตัวเรียงลำดับตาราง

ฉันมีช่องทำเครื่องหมายในตาราง 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

หากคุณใช้ตัวเรียงลำดับตารางดั้งเดิม ให้ลองใช้โค้ดจากคำตอบนี้*

หากคุณกำลังใช้ fork of tablesorter ของฉัน ให้ใช้ parser นี้ (สาธิต):

$.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' }
        }
    });
});​
  • เหตุผลที่ parser นี้ใช้งานไม่ได้กับปลั๊กอินดั้งเดิมก็เนื่องมาจากพารามิเตอร์ฟังก์ชันรูปแบบ - cellIndex ไม่พร้อมใช้งาน
person Mottie    schedule 07.11.2012
comment
ขอบคุณสำหรับการตอบกลับ. ฉันใช้ตัวเรียงลำดับตารางดั้งเดิมและทำตามที่ให้ไว้ในลิงก์ มันไม่ทำงาน และฉันไม่ได้เรียงลำดับคอลัมน์ด้วยช่องทำเครื่องหมาย สิ่งนี้จะเกิดขึ้นบน IE6 เท่านั้น ฉันทดสอบโค้ดเดียวกันบน Chrome และใช้งานได้โดยไม่มีปัญหาใดๆ - person fcmaine; 12.11.2012
comment
อ่า โอเค ฉันสับสนเล็กน้อยเนื่องจากตัวเลือกเพจเจอร์ removeRows มีอยู่ในทางแยกของฉัน แต่ไม่ใช่ส่วนหนึ่งของปลั๊กอินดั้งเดิม คุณช่วยสาธิตโค้ดหรือแสดงตัวอย่างผลลัพธ์ HTML ได้ไหม ทำให้เกิดความสับสนเนื่องจากเทมเพลตไม่มีการปิด </tr> หรือการปิด </script> - person Mottie; 13.11.2012
comment
@Mottie...ฉันได้อัปเดตสคริปต์ html และ knockoutjs ในคำถามโดยเพิ่มแท็กปิดสำหรับ tr และสคริปต์ ฉันไม่สามารถเพิ่มรูปภาพผลลัพธ์ html ของฉันได้ - person fcmaine; 13.11.2012
comment
ฉันสนใจว่าตาราง HTML ที่ได้ผลลัพธ์จะเป็นอย่างไร อินพุตทั้งหมดยังคงปิดใช้งานอยู่หรือไม่ ฟังก์ชัน BuildResultsPage ถูกเรียกอย่างไร มันถูกรวมไว้ในฟังก์ชันพร้อมเอกสารหรือไม่ - person Mottie; 15.11.2012
comment
ฉันไม่รู้วิธีแชร์ html ของฉันเป็นรูปภาพ ขอโทษด้วยกับเรื่องนั้น. HTML จะมีช่องทำเครื่องหมายและได้รับการตรวจสอบอย่างถูกต้องตามค่าที่ผูกไว้ แต่หลังจากการเรียก BuildTable() ตาราง HTML ผลลัพธ์ที่ได้จะไม่มีการทำเครื่องหมายในช่องทำเครื่องหมายทั้งหมดในคอลัมน์นั้น โดยไม่คำนึงถึงค่าที่ถูกผูกไว้ ใช่แล้ว BuildResultsPage() ถูกเรียกจากฟังก์ชัน Document Ready - person fcmaine; 20.11.2012