Jmesa 表格分页的配置 及其使用方法

1.首先去jmesa网站下载一个zip包，当前是最新4.0版本，不过我为了稳定，还是下载了3.0.4版本。下载地址：http://code.google.com/p/jmesa/downloads/detail?name=jmesa-3.0.4.zip

2.下载完成之后，解压缩，找到dist文件下jmesa-3.0.4.jar导入到自己的项目中。同时将该目录下的jmesa.css、jmesa.min.js、jquery.jmesa.min.js复制到自己的项目相应的位置下。

找一个jquery的js,例如jquery-1.5.1.min.js文件也复制到相应的位置下。

将这三个js文件依次引入你的jsp页面，注意是依次：

       <script type="text/javascript" src="${ctx}/resources/js/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="${ctx}/resources/js/jmesa.min.js"></script>
	<script type="text/javascript" src="${ctx}/resources/js/jquery.jmesa.js"></script>

若把jquery脚本放到后面，页面会提示错误找不到JQuery之类的错误。

3.咦，第三步好像没有什么。。嘿嘿。丢了~

4.将解压缩文件下的images下png文件夹复制到你的项目的相应位置。

5.配置相应的jmesa.properties文件。自己在WEB-INF目录下新建一个jmesa.properties文件，然后可以自由设定一些值，在该配置文件中可以控制页面如何显示信息。

例:limit.rowSelect.maxRows=10每页将显示10行数据

     html.toolbar.maxRowsDroplist.increments=10,20,60每页的数据行数可以在10,20,60之间进行切换

    html.imagesPath=/resources/images/png/表示jmesa默认的图片存放的位置，这个就是你之前复制的png文件夹所存放的位置啦

注意：这里是配置文件中一些相应的设置：可以自己添加

html.statusbar.resultsFound=Results {1} - {2} of {0}.
html.statusbar.noResultsFound=There were no results found.
html.toolbar.tooltip.firstPage=First Page
html.toolbar.tooltip.lastPage=Last Page
html.toolbar.tooltip.prevPage=Previous Page
html.toolbar.tooltip.nextPage=Next Page
html.toolbar.tooltip.filter=Filter
html.toolbar.tooltip.clear=Clear
html.toolbar.tooltip.saveWorksheet=Save Worksheet
html.toolbar.tooltip.filterWorksheet=Filter Worksheet
html.toolbar.tooltip.excel=XLS Export
html.toolbar.tooltip.jexcel=XLS Export
html.toolbar.tooltip.pdf=PDF Export
html.toolbar.tooltip.pdfp=PDF Export
html.toolbar.tooltip.csv=CSV Export
html.toolbar.tooltip.xml=XML Export
html.toolbar.text.firstPage=First
html.toolbar.text.lastPage=Last
html.toolbar.text.nextPage=Next
html.toolbar.text.prevPage=Prev
html.toolbar.text.filter=Filter
html.toolbar.text.clear=Clear
html.toolbar.text.saveWorksheet=Save Worksheet
html.toolbar.text.filterWorksheet=Filter Worksheet
html.toolbar.text.excel=XLS
html.toolbar.text.jexcel=XLS
html.toolbar.text.pdf=PDF
html.toolbar.text.pdfp=PDF
html.toolbar.text.csv=CSV
html.toolbar.text.xml=XML

6.配置相应的web.xml,在里面添加：

<context-param>//APP将2中的配置信息读取
  <param-name>jmesaPreferencesLocation</param-name>
  <param-value>WEB-INF/jmesa.properties</param-value>
 </context-param>
 <context-param>//后台table实现国家化的配置文件
  <param-name>jmesaMessagesLocation</param-name>
  <param-value>messages/message_info</param-value>
 </context-param>

messages表示国际化文件存放的文件夹，message_info表示国际化文件的名字开头。

比如 message_info_zh_CN.properties message_info_zh_HK.properties等等。

7.如果要在spring里面添加国际化支持的话，就要配置spring.xml文件，在里面添加：

<!--i18n设置默认语言是繁体-->

<beanid="localeResolver"class="org.springframework.web.servlet.i18n.SessionLocaleResolver">

<propertyname="defaultLocale"value="zh_HK"></property>

</bean>

<beanid="localeChangeInterceptor"class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor"/>

8.jmesa实现分页可以采用两种方法:a.标签实现b.java代码进行页面构造

以下将采用方式b。

a.某controller的跳转方法

publicModelAndView gostaff(HttpServletRequest request,

                                HttpServletResponse response)throws Exception {
   ModelAndView view = newModelAndView();

   //构造id为staffInfo的table

   TableModeltableModel = newTableModel("staffInfo",request,response);
   //为tableModel添加数据
   tableModel.setItems(newPageItems() {
    @Override
    publicint getTotalRows(Limit limit) {
     //TODO Auto-generated method stub
     returnstaffManager.getStaffTotalRowService();
    }
    @Override
    publicCollection<?> getItems(Limit limit) {
     //TODO Auto-generated method stub
     intendRow = limit.getRowSelect().getRowEnd();//获取当前最后一条数据的行数
     intstartRow =limit.getRowSelect().getRowStart();//获取当前第一天数据的行数
     returnstaffManager.queryAllStaff(startRow,endRow);
    }
   });
         //利用getHtmlTable()来构造table的具体的样式
        tableModel.setTable(getHtmlTable());

         //将tableModel对象转换成一个字符串到前台会进行解析
        request.setAttribute("staffInfo",tableModel.render());
        view.setViewName("staff/staffIndex1");
        return view;
 }  

  //构造相应的table样式

 private TablegetHtmlTable() {

         //创建HtmlTable 对象  实质上就是HTML的<table></table>
        HtmlTable htmlTable = new HtmlTable().width("910");

         //table的标题实现国际化需要在web.xml文件中进行配置
        htmlTable.setCaptionKey("title");

         //创建HtmlRow 实质上HTML的<tr></tr>
        HtmlRow row = new HtmlRow();
        htmlTable.setRow(row);//table设置相应的行

        //指定相应的列信息 "username"对应相应的对象的属性"StaffName"是table显示时的列名，当列名需要实现国际化时，调用.titleKey("配置文件中的key值")
        HtmlColumn staffName = new HtmlColumn("username").title("StaffName");
        row.addColumn(staffName);
        HtmlColumn pwd = newHtmlColumn("password").title("Psassword");
        row.addColumn(pwd);
        HtmlColumn email = new HtmlColumn("email").title("Email");
        row.addColumn(email);
        HtmlColumn phoneNumber = new HtmlColumn("mobilePhone");
        row.addColumn(phoneNumber);
        HtmlColumn telphone = new HtmlColumn("telphone");
        row.addColumn(telphone);

        //表格的某一列需要显示对象的对象属性的值直接"."
        HtmlColumn registerNum = newHtmlColumn("companyCop.registerNum").title("RegisterNum");
        row.addColumn(registerNum);

        //当需要显示的值是Hashset中的对象属性时,需要创建CellEditor()进行遍历取出,需要的属性值

         HtmlColumncompanyName = new HtmlColumn("companyCpn").title("CompanyName");
        companyName.setCellEditor(new CellEditor() {
        @Override
         publicObject getValue(Object item, String property, int rowcount){
         // TODOAuto-generated method stub
        Set<CompanyNameCpn> setCName =((StaffStf)item).getCompanyCop().getCompanyNameCpns();
        String cName = "";
        if(setCName.size()!=0){
        for(int i=0;i<setCName.size();i++){
        cName = setCName.iterator().next().getName();
        }
       }
       return cName;
     }
        });
        row.addColumn(companyName);

         //table中的某一列需要以链接的形式显示
        HtmlColumn detail = new HtmlColumn().title("Detail");
        detail.setCellEditor(new CellEditor() {
        @Override
         publicObject getValue(Object item, String property, int rowcount){
         // TODOAuto-generated method stub

         //动态的将查找出的数据已连接的形式显示
        //Object value = new HtmlCellEditor().getValue(item, property,rowcount);
                HtmlBuilder html = new HtmlBuilder();
                html.a().href().quote().append("点击链接所发送的请求").quote().close();
                html.append("Detail");//链接显示的内容
                html.aEnd();
                return html.toString();
    }
   });
        row.addColumn(detail);
        HtmlColumn update = new HtmlColumn().title("Update");
        update.setCellEditor(new CellEditor() {
       @Override
        public ObjectgetValue(Object item, String property, int rowcount) {
       // TODO Auto-generated method stub
       //Object value = new HtmlCellEditor().getValue(item, property,rowcount);
                HtmlBuilder html = new HtmlBuilder();
                html.a().href().quote().append("").quote().close();
                html.append("Update");
                html.aEnd();
                return html.toString();
    }
   });
        row.addColumn(update);
        HtmlColumn delete = new HtmlColumn().title("Delete");
        delete.setCellEditor(new CellEditor() {
       @Override
        public ObjectgetValue(Object item, String property, int rowcount) {
       // TODO Auto-generated method stub
       //Object value = new HtmlCellEditor().getValue(item, property,rowcount);
                HtmlBuilder html = new HtmlBuilder();
                html.a().href().quote().append("").quote().close();
                html.append("Delete");
                html.aEnd();
                return html.toString();
    }
   });
        row.addColumn(delete);
        return htmlTable;
      }

9.对应的jsp页面的写法：除了要在页面头部引入相应的js文件之外，还要添加两个js方法。

<script type="text/javascript">

functiononInvokeAction(id) {

$.jmesa.createHiddenInputFieldsForLimitAndSubmit(id);//打印excel等时候调用

}

functiononInvokeExportAction(id) { //点击上一页下一页调用

varparameterString = $.jmesa.createParameterStringForLimit(id);

location.href= '${ctx}/xxx/list.do?&'+ parameterString;  //这个就是你请求调用table的url请求路径

}

</script>

那么，如何将后台生成的htmltable显示到jsp页面呢？就是下面了，很简单：

<form name="staffForm" style="width:600px;">

<div id="staffInfo">

${staffInfo}

<!--与后台代码相对应request.setAttribute("staffInfo",tableModel.render());-->

</div>

</form>

好了，就这样配完了。。没有了吗，亲~