Liferay提供了好用的<liferay-ui:input-move-boxes>移動選單元件如下；
主要功能就是可以塞值至左方或右方選單，並且將其中一邊選單的值保存下來。
基本設定如下；
List<KeyValuePair> rightlist = new ArrayList<KeyValuePair>();
List<KeyValuePair> leftlist = new ArrayList<KeyValuePair>();
先宣告兩個list使用，並且在tag之內加入如下參數；
<liferay-ui:input-move-boxes rightList="<%=rightlist%>"
rightTitle="已選取人員" leftBoxName="userlist" leftList="<%=leftlist%>"
rightBoxName="tolist" leftTitle="所有人員"></liferay-ui:input-move-boxes>
rightList及leftList可放入剛才宣告的兩個list，一樣可從BoxName來取得該元件，基本上一個box裡面的值都是一個option。
一般來說，這個選單要搭配select來用才有靈活性，下拉式選單可以控制movebox中來源選單中的資料；
List<Team> team = TeamLocalServiceUtil.getGroupTeams(themeDisplay.getScopeGroupId()); -- 這裡是先取下拉式選單內資料的list
<aui:select name="teamSelect" id="teamSelect" label="請選擇負責單位:"
inlineField="true" inlineLabel="true"
onChange="changeUserGroup(this)">
<aui:option value="empty">請選擇負責單位</aui:option>
<%
for(Team t:team){
%>
<aui:option value="<%=t.getTeamId()%>"><%=t.getName()%></aui:option>
<%
}
%>
</aui:select>
--這裡則是和之前連動式選單的做法相同
下方為控制的javascript
function changeUserGroup(v){
var value = v.options[v.selectedIndex].value;
var teamSelect = document.getElementById("<portlet:namespace/>teamSelect").value;
var userlist = document.getElementById("<portlet:namespace/>userlist");
jQuery.post("<%=getUserURL.toString()%>","userGroupId="+value,function(data){
var usergroupData=data.split("\n");
while(userlist.options.length > 0){
userlist.remove(0);
}
for (i=0;i<usergroupData.length-1;i++)
{
value=usergroupData[i].split("-")[0];//用 - 來做分資料分割取出value
text=usergroupData[i].split("-")[1]; //用 - 來做分資料分割取出text
option=new Option(text,value); //用這樣的方法 IE 才會work
userlist.options[i]=option; //
});
}
};
以下為後端的method，一樣使用liferay搭配的Ajax方法；
public void serveResource(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
//主要為下拉式選單抓取各單位使用者時使用。
HttpServletRequest httpRequest = PortalUtil
.getHttpServletRequest(resourceRequest);
httpRequest = PortalUtil.getOriginalServletRequest(httpRequest);
final String param = httpRequest.getParameter("userGroupId");
final PrintWriter writer = resourceResponse.getWriter();
long userGroupId=Long.parseLong(param);>
try {
List<User> userlist=UserLocalServiceUtil.getTeamUsers(userGroupId);
for(User usr:userlist){
writer.append(usr.getUserId()+"-"+usr.getFirstName()+usr.getScreenName()+"\n");
}
} catch (SystemException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
這篇重點在紀錄該如何將list中的值post到後端，有兩種做法；
(1) 使用一般的script標籤
function submitform123(){
var tolist = document.getElementById("<portlet:namespace/>tolist").options; 先抓該list所有的option
for(var i =0;i<tolist.length;i++){
var option=tolist[i].value;
if(i==0){ 這邊是把一個個option用"-"做連接成為一串字串，並且存到rightlistText這個隱藏欄位中。
document.getElementById("<portlet:namespace/>rightlistText").value = option;
}else{
document.getElementById("<portlet:namespace/>rightlistText").value+="-"+option;
}
}
submitForm(document.<portlet:namespace />fm);最後將form送出
};
(2) 使用liferay provide的方法
<aui:script>
Liferay.provide(
window,
'submitForm',
function() {
document.<portlet:namespace />fm.<portlet:namespace />rightlistText.value = Liferay.Util.listSelect(document.<portlet:namespace />fm.<portlet:namespace />tolist);
document.<portlet:namespace />fm.submit();
}, ['liferay-util-list-fields']
);
</aui:script>
這個方法基本上結果都一樣，只是liferay使用了 Liferay.Util.listSelect 這個方法將list中所有的值以逗號隔開。
最後在後端只要使用String testString = ParamUtil.getString(request, "rightlistText");
就可以抓到整串字串，最後再用split方法將資料存入陣列中就可以使用了!
留言列表
