JSF2.xdatatable分頁控件與左側菜單最簡單應用

原創 ptianfeng 2018-09-01 03:25


　　　JSF2.xdatatable分頁控件與左側菜單最簡單應用


　　JSF2.x，功能強大，使用方便。全世界使用JSF的人越來越多。而且也有很多很好的控件給發出來了，如：richfaces、primefaces、myfaces等，就日前來講primefaces功能很強大，控件很多，但有一點不好就是不支持IE6，特別是下拉列表，p:dialog等，其它的分頁p:datatable實際使用起來總有不如意的地方。richfaces還支持可視化開發，可惜就是控件開發進度相比其它的慢了很多。下面帖我的控件的使用方法：

　　下載地址：http://download.csdn.net/detail/ptianfeng/4816928


一、分頁具體使用方法如下(不多說，直接給你些顏色看看)：

1. xhtml文件：　

　　<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ems="http://www.ems.com.cn"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">


            <h:dataTable id="tableId" value="#{userlogMBean.defaultDataModel}"
                    var="var" rows="10">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="" />
                        </f:facet>
                        <h:outputText value="#{var.sqlid}" style="display:none;" />
                    </h:column>
                 
                </h:dataTable>
                <ems:page id="pageId" for="tableId" maxPage="5" />


2.　相應的Managedbean:

/** 
 *   EMS 11185 限時未達郵費奉還
 * @author 螃蟹
 */
@SuppressWarnings(value = "serial")
@ManagedBean(name = "userlogMBean")
@ViewScoped()
public class UserlogMBean extends PageListBaseBean implements Serializable {
	
	public PagedListDataModel getDefaultDataModel() {
		if (defaultDataModel == null) {
			defaultDataModel = new PagedListDataModel(pageSize) {
				public DataPage fetchPage(int startRow, int pageSize) {
					ArrayList<UserlogVo> dataList = new ArrayList<UserlogVo>();
					List<Userlog> list = dao.getObjectList(jpql, pageSize,
							startRow);
					if (list != null) {
						for (Userlog u : list) {
							UserlogVo vo = new UserlogVo();
							vo.setSqlid(u.getSqlid());
							vo.setCode(u.getCode());
							vo.setDate(u.getDate());
							vo.setStation(u.getStation());
							vo.setUserid(u.getUserid());
							vo.setText(u.getText());
							dataList.add(vo);
						}
					}
					int size = dao.getCountOption(jpql);
					DataPage dataPage = new DataPage(size, startRow, dataList);
					return dataPage;
				}
			};
		}
		return defaultDataModel;
	}
}


    提示：關於PageListBaseBean更多的信息，可以參閱我在百度的blog（百度改版後，讓我很QF，所以轉到CSDN來了）：

http://hi.baidu.com/kittopang/item/19af4e37c6ede2fae6bb7a11

　　至此，分頁已經實現。下面是使用截圖：




二、左側菜單：

      1. xhtml文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:e="http://www.ems.com.cn">
    
<h:head>

</h:head>
<ui:composition>
    <h:form id="menuFormId">
        <div style="text-align:center; width:220px; height:500px; border-right-style:solid; border-right-color: Green; border-right-width: 2px; ">
            <f:facet name="header">
                <h:outputText value="系統功能菜單"  style="font-size: 18px"/>
            </f:facet>
            <h:commandButton action="users" value="查看用戶"/>
            <h:commandButton action="userlog" value="查看日誌"/>
                
            <a href="http://localhost:8080/r/index.jsp">主頁</a>
            
            <e:menu value="#{menuBean.model}"></e:menu>
        </div>
        
    </h:form>
</ui:composition>
</html>


提示：<e:menu value="#{menuBean.model}"></e:menu>中的menuBean是你自己定義的managedbean，model爲MenuModel在menuBean中的實例；

。

2.　相應的Managedbean:


/**
 * EMS 11185 限時未達郵費奉還
 * 
 * @author 螃蟹
 */
@SuppressWarnings(value = "serial")
@ManagedBean(name = "menuBean")
@SessionScoped
public class MenuBean implements Serializable {

	MenuModel model;

	public MenuModel getModel() {
		return model;
	}

	public MenuBean() {
		MenuItem mi;
		model = new MenuModel();
		model.setTitle("系統菜單");
		MenuSub ms = new MenuSub();
		ms.setValue("消息管理");
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("添加消息");
		ms.getChildren().add(mi);
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("刪除消息");
		ms.getChildren().add(mi);
		MenuSub sub = new MenuSub();
		sub.setValue("消息審查");
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("添加審查");
		sub.getChildren().add(mi);
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("刪除審查");
		sub.getChildren().add(mi);
		ms.getChildren().add(sub);
		model.addSubmenu(ms);
		ms = new MenuSub();
		ms.setValue("設備管理");
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("設備進口");
		ms.getChildren().add(mi);
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("設備下發");
		ms.getChildren().add(mi);
		model.addSubmenu(ms);
		ms = new MenuSub();
		ms.setValue("用戶日誌");
		mi = new MenuItem();
		mi.setUrl("users");
		mi.setValue("查看用戶");
		ms.getChildren().add(mi);
		mi = new MenuItem();
		mi.setUrl("userlog");
		mi.setValue("查看日誌");
		ms.getChildren().add(mi);
		model.addSubmenu(ms);
	}
}


     這種方法是通過redirect跳轉。

三、左側菜單action事件跳轉：

1. xhtml文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:e="http://www.ems.com.cn">
    
<h:head>

</h:head>
<ui:composition>
    <h:form id="menuFormId">
        <div style="text-align:center; width:220px; height:500px; border-right-style:solid; border-right-color: Green; border-right-width: 2px; ">
            <f:facet name="header">
                <h:outputText value="系統功能菜單"  style="font-size: 18px"/>
            </f:facet>
            <h:commandButton action="users" value="查看用戶"/>
            <h:commandButton action="userlog" value="查看日誌"/>
                
            <a href="http://localhost:8080/r/index.jsp">主頁</a>
            
            <e:menu value="#{menuBean.model}" action="#{menuBean.navigationAction}"></e:menu>
        </div>
        
    </h:form>
</ui:composition>
</html>



　　提示：<e:menu value="#{menuBean.model}" action="#{menuBean.navigationAction}"></e:menu>中的menuBean是你自己定義的managedbean，

並且要extends　EMS11185MenuBean；　action="#{menuBean.navigationAction}"，這個內容你必需不能更改（或者說你無需更改）直接用在你的<e:menu />標籤中。

2.　相應的Managedbean:

/** 
 *   EMS 11185 限時未達郵費奉還
 * @author 螃蟹
 */
@SuppressWarnings(value = "serial")
@ManagedBean(name = "menuBean")
@SessionScoped
public class MenuBean extends EMS11185MenuBean implements Serializable{

    
    public MenuBean(){
        MenuItem mi;
        model = new MenuModel();
        model.setTitle("系統菜單");
        MenuSub ms = new MenuSub();
        ms.setValue("消息管理");
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("添加消息");
        ms.getChildren().add(mi);
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("刪除消息");
        ms.getChildren().add(mi);
        
        MenuSub sub = new MenuSub();
        sub.setValue("消息審查");
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("添加審查");
        sub.getChildren().add(mi);
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("刪除審查");
        sub.getChildren().add(mi);
        
        ms.getChildren().add(sub);

        
        
        model.addSubmenu(ms);
        
        ms = new MenuSub();
        ms.setValue("設備管理");
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("設備進口");
        ms.getChildren().add(mi);
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("設備下發");
        ms.getChildren().add(mi);
        
        model.addSubmenu(ms);
        
        ms = new MenuSub();
        ms.setValue("用戶日誌");
        
        mi = new MenuItem();
        mi.setUrl("users");
        mi.setValue("查看用戶");
        ms.getChildren().add(mi);
        
        mi = new MenuItem();
        mi.setUrl("userlog");
        mi.setValue("查看日誌");
        ms.getChildren().add(mi);
        
        model.addSubmenu(ms);
    }

    
}

3. EMS11185MenuBean代碼： 

@SuppressWarnings("serial")
public class EMS11185MenuBean implements Serializable{
	protected MenuModel model;
	private String navigation;
	
	public MenuModel getModel() {
		return model;
	}

	public void setModel(MenuModel model) {
		this.model = model;
	}
	
	public String navigationAction(){
		return navigation;
	}
	
	public void setNavigation(String navigation) {
		this.navigation = navigation;
	}
}


　　至此，左側菜單已經實現。下面是使用截圖：
























    





發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








PrimeFaces 上傳文件 中文亂碼






      某度搜索出來的，關於PrimeFaces <p:fileUpload>上傳文件中文亂碼的問題，基本沒解決得了，所以Google了一下，找到了解決辦法；並整理了一下，內容如下( 此方法的好處就是不用編輯源文件):
一、Prime






 ptianfeng

2020-06-15 07:05:54









JSF: "Target Unreachable, identifier 'helloBean' resolved to null"問題解決






 JC_fun

2020-04-22 16:30:02









primefaces和jsf2的一些技巧






 semi_zhou

2018-09-03 02:34:28









JBoss AS 7.1.x 支持 JSF 2.2.X






 ptianfeng

2018-09-01 03:25:35









EJB中的Timer






 ptianfeng

2018-09-01 03:25:34









JSF和Richfaces中使用框架頁(Frameset)






 ptianfeng

2018-09-01 03:25:34









PrimeFaces <p:fileUpload>上傳文件 中文亂碼






 ptianfeng

2018-09-01 03:25:11









ViewExpiredException發生時，如何恢復View視圖






 webnms

2018-08-27 23:16:39









JSF notes






 劲风

2018-08-26 10:43:04