当用户选择数据表所有单个复选框列切换器时如何检查 SelectAll？答案

【问题标题】：How to check SelectAll when user selects the data-table all individual check-box column toggler?当用户选择数据表所有单个复选框列切换器时如何检查 SelectAll？
【发布时间】：2017-06-12 19:47:34
【问题描述】：

根据<p:columnToggler> 中的列选择显示数据表中的列。

在该列选择中，当我单独选中所有复选框时，应选中 selectAll。

当用户单独选择数据表所有复选框列切换器时如何检查 SelectAll ？

数据表中的切换代码：

<f:facet name="header">
      <h:panelGroup layout="block" styleClass="columnSty vetselectStyle">
        <p:commandButton id="toggler" value="" global="false" onclick="addSelectAll();" type="button" title="Column Selection"/>
          <p:columnToggler datasource="vetDataTable" id="colTogglerVetDataTable" trigger="toggler">
          </p:columnToggler>
     </h:panelGroup>
</f:facet>

在列选择中添加全选复选框的代码：

function addSelectAll(){
    $("#li_togglerSelectAll")&amp;&amp;
    $("#li_togglerSelectAll").remove(),
    $(".ui-columntoggler-items").prepend('<li id="li_togglerSelectAll" class="selectAllSty"> <input type="checkbox" id="togglerSelect" onclick="selectAllInToggler(document.getElementById(\'togglerSelect\').checked);"/><label for="togglerSelect">SelectAll</label></li>')
}

function selectAllInToggler(a){
    $(".ui-columntoggler-items").find("li").find("> .ui-chkbox > .ui-chkbox-box >.ui-chkbox-icon").each(function(b){a?$(this).hasClass("ui-icon-blank") &amp;&amp; $(this).click():$(this).hasClass("ui-icon-check") &amp;&amp; $(this).click()
    })
}

【问题讨论】：

标签： jquery primefaces jsf-2 toggle

【解决方案1】：

解决办法如下：

当用户选择数据表时选择所有单个复选框列切换器

<h:panelGroup>
   <p:commandButton id="toggler" value="" global="false" onclick="addSaveButton();selectAll();" type="button" title="Column Selection" />
   <p:columnToggler datasource="vetDataTable" id="colTogglerVetDataTable" trigger="toggler">
    <p:ajax event="toggle" oncomplete="selectAll();" />
   </p:columnToggler>
  </h:panelGroup>

function selectAll() {
           var a=[],b=[]; 
           $(".ui-columntoggler-items").find("li").find("> .ui-chkbox > .ui-chkbox-box >.ui-chkbox-icon").each(function()
                  {
                    var d="";
                    $(this).hasClass("ui-icon-blank")?(
                            d=$(this).parent().parent().parent().find("label").text(),
                            a.push(d.trim())):$(this).hasClass("ui-icon-check")&amp;&amp;
                    (       d=$(this).parent().parent().parent().find("label").text(),
                            b.push(d.trim()))
                   });
                    //alert(a.length);
                    //alert(b.length);
                    if(a.length == '0')
                    $('#togglerSelect').prop('checked', true);
                    else
                    $('#togglerSelect').prop('checked', false);
       }

【讨论】：

【解决方案2】：

将一个函数绑定到切换器的单击事件，以检查是否选择了所有项目。

类似这样的：

function addSelectAll(){
    $("#li_togglerSelectAll")&amp;&amp;
    $("#li_togglerSelectAll").remove(),
    $(".ui-columntoggler-items").prepend('<li id="li_togglerSelectAll" class="selectAllSty"> <input type="checkbox" id="togglerSelect" onclick="selectAllInToggler(document.getElementById(\'togglerSelect\').checked);"/><label for="togglerSelect">SelectAll</label></li>')

    ##Add this
    $('.ui-columntoggler-items').bind("click", function() {
        if ($($(this)[0]).find('.ui-chkbox-icon.ui-icon.ui-icon-blank').length === 0) { $('#togglerSelect').prop('checked', true); } else { $('#togglerSelect').prop('checked', false); }
    })
}

【讨论】：

【解决方案3】：

我已经以类似的方式实现了它

  function selectAllBtn() { 
      if( $(".ui-columntoggler-items").find("li")[0].id != "li_togglerSelectAll"){ //only once
      $(".ui-columntoggler-items").prepend('<li id="li_togglerSelectAll" > <input type="checkbox" id="togglerSelect" class="margemDir" onclick="selectAllInToggler(document.getElementById(\'togglerSelect\').checked);"/><label for="togglerSelect">Sellect all</label></li>')
       }
   }

  function selectAllInToggler() {                                  
       $(".ui-columntoggler-items").find("li").each(function()   {                                   
          if($('#togglerSelect').prop('checked')){  
                if(  $(this).find("span").hasClass("ui-icon-blank") ) {
                        $(this).find('label')[0].click();
                 }
              }else   
              if( $(this).find("span").hasClass("ui-icon-check") ){     
                          $(this).find('label')[0].click();
                      }
                } 
           })     
  };

在视图中只需调用 'selectAllBtn()';

 <p:commandButton id="togglerColTab"  type="button" 
                  title="#{msg.label_collumns}"    icon="fa fa-columns"    
     onclick="selectAllBtn();"  styleClass="btnFilterCol "  />

【讨论】：