在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();
}
}
答案 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。但是还有一个小部件变量名称的约定。如果您未指定widgetVar
,则小部件将为:
var widgetVar = 'widget_' + element.id.replace(/:/g,'_');
我正在使用PrimeFaces 3.5。