Question

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

当用户单击任何内部dataTable中的行时，该行被选中，并且未选择上一个选定的行。

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

<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来完成工作。

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

所以我的问题是： 如何在JS / JQuery中按类或其他方式获取primeface小部件实例？或者你有更好的解决方案。

感谢您的努力。

------------------------------------我的完整代码：------- --------------------------------

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对象，然后获取它的widget对象，我尝试了$('.innerTable').first().data()但是失败了。

然后我假设primeface将其窗口小部件声明为全局变量，所以我尝试了Object.keys(window)，并在那里找到了widgetVar名称。（带有前缀=＆＃34; eventTableVar _＆＃34;在这种情况下）。接下来就是将String类型名称设置为widget对象：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);
  };

我不认为这是一种非常有效的方法，因为它会迭代所有全局键，并使用String比较来定位widget。所以我还在等待更好的答案。

嵌套p:dataTable似乎还有其他问题。见这里：drag-and-drop-in-nested-datatables

Answer 2

widgetVar和jquery选择器之间存在直接连接。 widget变量具有以下属性：

id：html元素的id属性
jqId：jquery selector
jq：jquery object

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

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

我正在使用PrimeFaces 3.5。

如何在js或JQuery中获取widget实例pf p：dataTable

2 个答案: