如何在js或JQuery中獲取小部件實例pf p：dataTable

Question

在JSF中，我有多個嵌套在外部p:dataTable中的p:dataTable。

當用戶單擊任何內部數據表中的行時，該行被選中，並且前一個選定的行未被選中。

我使用primeface數據表窗口小部件來選擇的那一行和unselectAllRows小部件。

<script type="text/javascript"> 
     function selectCurrentRow(table,index){ 
      //How to unselect ALL tables? 
      table.unselectAllRows(); 

      table.selectRow(index ,false); 
      } 
    </script> 

內的數據表：

 <p:ajax event="rowSelect" listener="#{bean.onRowSelect}" 
      update=":eventDetail" /> 

     <p:column style="width:60px;"> 
      <div onmousedown="selectCurrentRow(eventTableVar_#{outerRowId}_#{outerColId},#{innerRowId});"> 
       <p:outputPanel id="event" styleClass="event_block"> 
        <h:outputText value="#{event}" /> 
       </p:outputPanel> 
      </div> 
     </p:column> 

    </p:dataTable> 

的onmousedown事件是用戶觸發選擇過程。如果我刪除該行，選擇將不起作用，我猜是因爲我有多個內部dataTable選擇，所以我設置widgetVar並使用客戶端API來完成這項工作。

如何過這樣我只能取消選擇該paticular小部件的行，其他內DataTable的選擇行仍將保持選定，這不是我想要的，我希望他們都成爲未選擇。但我不知道如何獲取其他內部數據表的小部件。

所以我的問題是： 如何在JS/JQuery中通過class或id else獲取primeface小部件實例？或者你有更好的解決方案爲我的senario。

謝謝你的努力。

------------------------------------我的完整代碼：------ ---------------------------------

JSF

<h:form id="centerForm"> 
     <p:dataTable id="outerTable" var="user" rowIndexVar="outerRowId" 
      value="#{bean.userList}"> 

      <p:column styleClass="user_name"> 
       <h:outputText value="#{user}" /> 
      </p:column> 

      <p:columns value="#{bean.weekdays}" var="date" styleClass="weekday" 
       columnIndexVar="outerColId"> 

       <f:facet name="header"> 
        <h:outputText value="#{bean.weekdays[outerColId]}"> 
         <f:convertDateTime pattern="EEE, dd MMM" /> 
        </h:outputText> 
       </f:facet> 

       <p:dataTable id="eventTable" styleClass="innerTable" 
        rowKey="#{event}" selection="#{bean.selectedEvent}" 
        selectionMode="single" 
        widgetVar="eventTableVar_#{outerRowId}_#{outerColId}" 
        rowIndexVar="innerRowId" var="event" 
        value="#{bean.getEventList(user,date)}" 
        rendered="#{not empty bean.getEventList(user,date)}"> 

        <p:ajax event="rowSelect" listener="#{bean.onRowSelect}" 
         update=":eventDetail" /> 

        <p:column style="width:60px;"> 
         <div onmousedown="selectCurrentRow(eventTableVar_#{outerRowId}_#{outerColId},#{innerRowId});"> 
          <p:outputPanel id="event" styleClass="event_block"> 
           <h:outputText value="#{event}" /> 
          </p:outputPanel> 
         </div> 
        </p:column> 

       </p:dataTable> 
      </p:columns> 
     </p:dataTable> 
    </h:form> 
    <p:dialog id="eventDetail"> 
    </p:dialog> 

豆

private List<String> userList; 
    private List<String> eventList; 
    private Date[] weekdays; 

    private String selectedEvent; 

    private Map<String, Map<Date, List<String>>> map; 

    public List<String> getEventList(String eid, Date date) { 
     return map.get(eid).get(date); 
    } 

    public void onRowSelect(){ 
     //do some 
    } 

    @PostConstruct 
    public void init() { 
     generateWeekdays(new Date()); 

     userList = new ArrayList<String>(); 
     userList.add("John"); 
     userList.add("Allice"); 
     userList.add("Bob"); 

     eventList = new ArrayList<String>(); 
     eventList.add("Event A"); 
     eventList.add("Event B"); 
     eventList.add("Event C"); 
     eventList.add("Event D"); 

     map=new HashMap<String, Map<Date, List<String>>>(); 
     for(String user:userList){ 
      Map<Date, List<String>> week=new HashMap<Date, List<String>>(); 
      for(Date date:weekdays){ 
       List<String> list=new ArrayList<String>(); 
       week.put(date, list); 
      } 
      map.put(user, week); 
     } 
     getEventList("John",weekdays[0]).add(eventList.get(0)); 
     getEventList("John",weekdays[0]).add(eventList.get(1)); 
     getEventList("John",weekdays[2]).add(eventList.get(3)); 
     getEventList("John",weekdays[3]).add(eventList.get(1)); 
     getEventList("John",weekdays[3]).add(eventList.get(3)); 

     getEventList("Bob",weekdays[2]).add(eventList.get(1)); 
     getEventList("Bob",weekdays[2]).add(eventList.get(3)); 
    } 


    private void generateWeekdays(Date from) { 
     Calendar cal = Calendar.getInstance(); 
     cal.setTime(from); 
     weekdays = new Date[7]; 
     for (int i = 0; i < 7; i++) { 
      cal.add(Calendar.DAY_OF_MONTH, 1); 
      weekdays[i] = cal.getTime(); 
     } 
    } 

Answer 1

widgetVar和jquery選擇器之間有直接連接。小部件變量的屬性：jQuery選擇

JQ：jQuery對象

您可以瀏覽所有小工具和比較有ID的

• ID：html元素
• jqId的id屬性。但也有一個小部件變量名稱的約定。如果不指定widgetVar，小部件是：

  var widgetVar = 'widget_' + element.id.replace(/:/g,'_'); 
  

  我使用PrimeFaces 3.5。

Answer 2

我找到了一個解決方法，但不知道它是否是一個好的方法。

我最初的想法是首先找到JQuery對象，並獲取它的小部件對象，我試過$('.innerTable').first().data()但失敗。

然後我假設primeface將它的小部件聲明爲全局變量，所以我嘗試了Object.keys(window)，並且在那裏找到了widgetVar名稱（在這種情況下帶有prefix =「eventTableVar_」）。所以接下來的事情是將該字符串類型名稱設置爲窗口小部件對象：window[name]和eval(name)都可以完成這項工作。

因此，這裏是我的解決方法：

function selectCurrentRow(table,index){ 
    // get all global object keys since primeface put its widget as global 
    var keys=Object.keys(window),eventTableVar; 
    // Iterate over global objects to find targeted tables witn String startwidth match 
    for(var i=0;i<keys.length;i++){ 
    if(keys[i].lastIndexOf("eventTableVar_",0)==0){ 
    //Get instance and do what you want. 
    eventTableVar=window[ keys[ i ] ]; 
    eventTableVar.unselectAllRows(); 
    } 
    } 
    table.selectRow(index ,false); 
    }; 

我不認爲這是一個非常有效的方法，因爲它會遍歷所有的全局性的按鍵，並使用字符串比較來定位部件。所以我還在等待更好的答案。

此外，似乎嵌套p:dataTable其他問題。看到這裏：drag-and-drop-in-nested-datatables