如何在 js 或 JQuery 中获取小部件实例 pf p:dataTable

Question

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

当用户单击任何内部数据表中的一行时，该行被选中，而之前选择的行被取消选中。

我使用 primeface 数据表小部件选择行并取消选择该小部件的所有行。

<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 事件是用户触发选择过程的地方。如果我删除该行，选择将不起作用，我想原因是因为我有多个内部数据表可供选择，所以我设置了widgetVar 并使用客户端 API 来完成这项工作。

如何以这种方式我只能取消选择该特定小部件的行，其他内部数据表的选定行将保持选中状态，这不是我想要的，我希望它们都被取消选中。但是我不知道如何获取其他内部数据表的小部件。

所以我的问题是： 如何在 JS/JQuery 中按类或 id 获取 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

我找到了一种解决方法，但不知道它是否好用。

我最初的想法是先找到 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

Answer 2

widgetVar 和 jquery 选择器之间有直接的联系。小部件变量具有以下属性：

• id：html元素的id属性
• jqId：jquery 选择器
• jq：jquery 对象

您可以浏览所有小部件并比较那里的 id。但是还有一个小部件变量名称的约定。如果您不指定widgetVar，则小部件将是：

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

我正在使用 PrimeFaces 3.5。