Question

我正在使用表格分类器对所有列进行排序。所有列都正常工作，除了一列＆＃34; Rush Request＆＃34;它具有apex：inputcheckbox标签。该列需要是可排序的，即当单击列标题时，所有选中的复选框都需要冒泡或冒泡。为什么它不能正常工作。请建议。

以下是我的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/

在此处添加了第二个查找第二个孩子的内容：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' 
                    } 
                } 
            }
            );

    });

Answer 2

表格分类器比较HTML节点值。您可以做的一件事是在复选框之前添加隐藏的<apex:outputText>，并添加与复选框相同的值。这将用于对列进行排序。

<apex:column headerValue="Rush Request">
    <apex:outputText value="{!wrap.field13}" style="display:none;" />
    <apex:inputCheckbox value="{!wrap.field13}" styleClass="header" disabled="true" id="checkbox1"/>
</apex:column>

按列输入<input checkbox =“”/>元素

2 个答案: