ユーザーがデータテーブルすべての個別のチェックボックス列トグルを選択したときにSelectAllをチェックする方法？

Question

<p:columnToggler>の列選択に基づいてデータテーブルに列を表示します。

このチェックボックスをオンにすると、チェックボックスをすべてオンにするとselectAllをオンにする必要があります。

ユーザーがデータテーブルのすべてのチェックボックス列トグルラを個別に選択すると、SelectAllを確認する方法は？ DataTableの

トグラーコード：

<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")&& 
    $("#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") && $(this).click():$(this).hasClass("ui-icon-check") && $(this).click() 
    }) 
} 

Answer 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")&& 
        (  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); 
     } 

トグラー

のSelectAllユーザーがデータ・テーブルを選択し、すべての個々のチェックボックス欄

Answer 2

バインド機能をお使いのトグラーのクリックイベントにすべてのアイテムが選択されているかどうかをチェックします。このような

気にいら：ここ

function addSelectAll(){ 
    $("#li_togglerSelectAll")&& 
    $("#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); } 
    }) 
}