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

时间:2014-05-08 06:49:27

标签: javascript jquery primefaces datatable

在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();
        }
    }

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

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

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

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

我正在使用PrimeFaces 3.5。