比Display还牛的标签(一)!

EC(extremecomponents)使用介绍

<o:p> </o:p>

 EC的特点:

可以定义导出数据方式，excel、pdf、csv
分页导航、排序、查询。
自己扩展

1.       http://www.extremecomponents.org 下载eXtremeComponents-<st1:chsdate w:st="on" isrocdate="False" year="1899" day="30" islunardate="False" month="12">1.0.1</st1:chsdate>-with-dependencies

2.       建立web工程

将/lib*.jar和/dist/extremecomponents-<st1:chsdate w:st="on" isrocdate="False" year="1899" day="30" islunardate="False" month="12">1.0.1</st1:chsdate>.jar放置在webProject/WEB-INF/lib下

将extremecomponents.tld放置在/WEB-INF下

将images直接拷贝到webProject/WebRoot/下

将extremecomponents.css放置在webProject/WebRoot/css下

将extremecomponents.js放置在webProject/WebRoot/js下

将/test/test.jsp直接拷贝到webProject/WebRoot/下

将test.jsp页面的

对taglib的相对路径引用改变为

<!----><o:p></o:p>

Css的引用<o:p></o:p>

<link href="css/extremecomponents.css" type="text/css" rel="stylesheet"><o:p></o:p>

将工程发布到支持JSP1.2或更高版本的服务器上就ok了!下面是显示效果<o:p></o:p>

<v:shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></v:path><o:lock aspectratio="t" v:ext="edit"></o:lock></v:shapetype><o:p></o:p>

3.       具体介绍EC的用法

    <ec:table <o:p></o:p>

       items="pres"<o:p></o:p>

       action="${pageContext.request.contextPath}/test.jsp"<o:p></o:p>

       imagePath="${pageContext.request.contextPath}/images/table/*.gif"<o:p></o:p>

       title="Presidents"<o:p></o:p>

       width="60%"<o:p></o:p>

       rowsDisplayed="2"<o:p></o:p>

       ><o:p></o:p>

       <ec:row><o:p></o:p>

           <ec:column property="name"/><o:p></o:p>

           <ec:column property="nickname"/><o:p></o:p>

           <ec:column property="term"/><o:p></o:p>

       ec:row><o:p></o:p>

    ec:table><o:p></o:p>

Items属性表示在scope中存储的集合对象.<o:p></o:p>

   Title表示显示的标题

   Width表示表格的显示宽度

   RowsDisplayed表示显示的行数,即每页显示的页数.

   Action应该表示的是一个传过来那个集合对象的action或者是jsp页面.

   ImgePath表示放置图片的路径,显示表格风格的.

4.  特殊属性

   Sorterable 设置是否支持自动排序,默认为真,当点击每个属性列的列头的链接的时候酒会自动根据当前列的内容进行排序

   Filterable  设置是否支持过滤功能默认为真,你可以在文本框里面输入关键字,这样酒会自动根据你输入的关键字进行排序.

   showPagination 设置为false,在一页显示所有信息. <o:p></o:p>

  

<o:p> </o:p>

RowsDisplayed的原理:<o:p></o:p>

从一列中明确取得值,非常有用但是你需要理解表是如何构造行的。为了构造行，表需要对所有行进行 rowsDisplayed 属性设定次数的迭代。每次迭代都从Beans里取得下一个bean 并使用var 属性设定的名称传入page 范围。也可以说每次迭代你都访问的是集合中当前行对应的bean。<o:p></o:p>

5.     利用action来实现<o:p></o:p>

  public class TaskExecPlanAction extends DispatchAction {<o:p></o:p>

    private static Log log = LogFactory.getLog(TaskExecPlanAction.class);<o:p></o:p>

<o:p> </o:p>

    public TaskExecPlanAction() {<o:p></o:p>

    }<o:p></o:p>

// President是一个JavaBeans<o:p></o:p>

    public ActionForward list(ActionMapping mapping, ActionForm actionForm,<o:p></o:p>

        HttpServletRequest req, HttpServletResponse rep)<o:p></o:p>

        throws AppException, SysException {<o:p></o:p>

        List presidents = new ArrayList();<o:p></o:p>

President president = new President();<o:p></o:p>

president.setFirstName("George");<o:p></o:p>

president.setLastName("<st1:state w:st="on"><st1:place w:st="on">Washington</st1:place></st1:state>");<o:p></o:p>

presidents.add(president);<o:p></o:p>

president = new President();<o:p></o:p>

president.setFirstName("John");<o:p></o:p>

president.setLastName("<st1:place w:st="on">Adams</st1:place>");<o:p></o:p>

presidents.add(president);<o:p></o:p>

request.setAttribute("presidents", presidents);<o:p></o:p>

return new ModelAndView("/demo/presidents.jsp");    }<o:p></o:p>

<o:p> </o:p>

  action="${pageContext.request.contextPath}/ TaskExecPlanAction.do"<o:p></o:p>

6.样式设置<o:p></o:p>

 

cellspacing="0"<o:p></o:p>

cellpadding="0"<o:p></o:p>

border="0"<o:p></o:p>

width="80%"<o:p></o:p>

style=""<o:p></o:p>

styleClass=""<o:p></o:p>

/><o:p></o:p>

7.     行设置<o:p></o:p>

  <ec:row><o:p></o:p>

           <ec:column property="name"/><o:p></o:p>

           <ec:column property="nickname"/><o:p></o:p>

           <ec:column property="term"/><o:p></o:p>

       ec:row><o:p></o:p>

8.     高亮度设置<o:p></o:p>

   highlightRow="true"<o:p></o:p>

 当鼠标放在某一行上的时候会高亮度显示的!<o:p></o:p>

9.     JavaScript属性设置<o:p></o:p>

  

onclick=""<o:p></o:p>

onmouseover=""<o:p></o:p>

onmouseout=""<o:p></o:p>

/><o:p></o:p>

10.  如果要为某一列的所有元素加一个链接的话:<o:p></o:p>

   <ec:column property="name"><o:p></o:p>

         <a href="http://www.google.com">${pre.name}a> <o:p></o:p>

ec:column>