extremecomponents学习小结

extremecomponents是个不错的显示列表数据的开源方案，下面小结学习之。

1 首先在WEB.xml中配置
  <filter>  
        <filter-name>eXtremeExport</filter-name>  
        <filter-class>org.extremecomponents.table.filter.ExportFilter</filter-class>  
    </filter>  
      <filter-mapping>      
        <filter-name>eXtremeExport</filter-name>      
        <url-pattern>/*</url-pattern>      
</filter-mapping>  
2 在tld的目录下，存放extremecomponents.tld文件
3 在JSP页面中，进行如下设置
首先引入：
<%@ taglib uri="/WEB-INF/tld/extremecomponents.tld" prefix="ec" %>
 然后在要显示列表的位置中，写入：
 <ec:table
  tableId="ec"
   items="dataList"
   action="testtt.action?m=loadData"
   imagePath="images/table/*.gif"
   title="数据列表"
   width="100%"
   rowsDisplayed="15"
   var="m"
   >
   <ec:exportXls
fileName="user.xls"
tooltip="导出Excel"/>
    <ec:row highlightRow="true">
            <ec:column property="title" sortable="true"/>
            <ec:column property="name" sortable="true"/>
            <ec:column property="urlpath" sortable="true"/>
            <ec:column property="mydate" cell="date" format="yyyy-MM-dd" sortable="true" />
           <ec:column property="id" title="选择" viewsDenied="xls"><a href="testtt.action?m=toEditPage&objectId=${m.id}" target="_blank">修改</a> <a class="hei" href="javascript:deldata();">删除</a> <input name="chkid" type="checkbox"  value="${m.id}"/></ec:column>
   </ec:row>
  </ec:table>
其中我们看下javascript中的deldata()(这里是删除单条数据）
function deldata(){
   
    //删除单条记录可以用下面的方法
 var objIds = $n('chkid');
 if(objIds!=null){
  for(i = 0 ; i < objIds.length; i++){
   if(objIds[i].checked == true){
      if(confirm("确定要删除该条记录吗?")){
     document.all.frm1.objectId.value = objIds[i].value;
     document.all.frm1.action = "testtt.action?m=delete";
     document.all.frm1.submit();
     break;
    }
   }
  }
 }
}
   

//删除多条记录

function delmulti(){
        var objIds = $n('chkid');   
      if(confirm("确定要删除该条记录吗?")){
 if(objIds!=null){
  for(i = 0 ; i < objIds.length; i++){
   if(objIds[i].checked == true){
    document.all.frm1.objectId.value = objIds[i].value;
    alert(objIds[i].value);
    document.all.frm1.action = "testtt.action?m=delete";
    document.all.frm1.submit();
   }
  }
 }
  } 

}
 在SPRING MVC中，其中的testtt.action中，针对删除可作出如下处理：
public ModelAndView delete(HttpServletRequest request,
   HttpServletResponse response, Testtt command, BindException errors)
   throws ServletException, IOException {
  
  
  String[] ids = request.getParameterValues("objectId");
  System.out.println("ids length"+ids.length);
  if (null != ids)
   for (int i = 0; i < ids.length; i++) {
      System.out.println("id is"+ids[i]);
    this.testttmanager.deleteTesttt(Integer.parseInt(ids[i]));
   }
  return new ModelAndView("test/testttList", "dataList",
    this.testttmanager.getAll());
 }
在ACTION部分，把数据加载出来的方法：
public ModelAndView loadData(HttpServletRequest request,
   HttpServletResponse response, Testtt command, BindException errors)
   throws ServletException, IOException {
  ExtremeTablePage ext = new ExtremeTablePage(request, 15, "ec");
  return new ModelAndView("test/testttList", "dataList",
    this.testttmanager.getPageCollection(ext));
 }
其中在testttmanager中，要引入：
import org.extremecomponents.table.limit.ExtremeTablePage;

public List getPageCollection(ExtremeTablePage ext) {
  return testttdao.getPageCollection(ext);
 }

评论

1 楼 迷人阳光love 2012-11-16  

这个以前没见过，最近看一个比较老的项目，才接触，这个东西是不是现在用的少了