比Display还牛的标签(一)!

EC(extremecomponents)使用介绍

<o:p> </o:p>

 EC的特点:

可以定义导出数据方式,excelpdfcsv
分页导航、排序、查询。

自己扩展

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>

  

οnclick=""<o:p></o:p>

οnmοuseοver=""<o:p></o:p>

οnmοuseοut=""<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值