javascript - 按具有 <input checkbox> 元素的列排序

Question

我正在使用表排序器对所有列进行排序。除了具有 apex:inputcheckbox 标记的一列“Rush Request”之外，所有列都工作正常。该列需要可排序，即单击列标题时，所有列选中的复选框需要向上冒泡或向下冒泡。为什么它不能正常工作。请提出建议。

下面是我的VF页面

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<apex:includeScript value="{!URLFOR($Resource.tablesorter, 'jquery.tablesorter.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.tablesorter, 'themes/blue/style.css')}"/>

<script type="text/javascript">
    $j = jQuery.noConflict();    
    $j(document).ready(function () {
    $j("[id$=pendingMilestones]").tablesorter();

    });

  //some other unrelated js
    function reInitializeTableSorter() {
        $j("[id$=details]").tablesorter();
    }


</script>

    <apex:form id="theform" >  
     <div style="overflow:auto;height:500px">
     <!-- ******* Section Of Pending milestones whose actual recieved date is not null  ********   -->  
        <apex:pageBlock id="pb1" title="Pending Milestones"> 
            <apex:pageBlockButtons location="top" >
          </apex:pageBlockButtons>

          <apex:outputPanel id="myTable" >
            <apex:pageBlockSection columns="1">      
                <apex:pageBlockTable id="pendingMilestones" value="{!displayList}" var="wrap" rendered="{!DisplayList.size>0}"  styleClass="tablesorter" headerClass="header">
                    <apex:column headerValue="PSS Opportunity #">
                        <apex:outputtext styleClass="header" value="{!wrap.field10}"/>                                 
                    </apex:column>
                    <apex:column headerValue="Status">
                        <apex:outputtext styleClass="header" value="{!wrap.field11}"/>                                 
                    </apex:column>                   
                    </apex:column>

                    <apex:column headerValue="Rush Request">
                        <span class="hidden">1</span>
                        <apex:inputCheckbox value="{!wrap.field13}" styleClass="header" disabled="true" id="checkbox1"/>
                    </apex:column> 
                </apex:pageBlockTable>
                <apex:outputText style="font-style:italic" value="No records to display." rendered="{!DisplayList.size=0}"/>
            </apex:pageBlockSection> 
           </apex:outputPanel> 

        </apex:pageBlock>

Answer 1

这是一个简单的 HTML/jQuery/Tablesorter 示例。我的 jsFiddle 工作事件虽然看起来很有趣。我没有完全导入 CSS，但列排序功能正在工作。 https://jsfiddle.net/bindrid/qaut048v/2/

在此处添加了第二个寻找第二个 child 的:https://jsfiddle.net/bindrid/qaut048v/4/

这是我的脚本:

    $(document).ready(function () {
        // add parser through the tablesorter addParser method 
        $.tablesorter.addParser({
            // set a unique id 
            id: 'Checkboxes',
            is: function (s) {
                // return false so this parser is not auto detected 
                return false;
            },
            format: function (s, table, cell, cellIndex) {
                // It looks backwards but I did that so that 
                // first click will put the checked up top
                return cell.children[1].checked ? 0 : 1;

            },
            // set type, either numeric or text 
            type: 'numeric'
        });
        $(".tablesorter").tablesorter(
            { 
                headers: { 
                    3: { 
                        sorter:'Checkboxes' 
                    } 
                } 
            }
            );

    });