EC标签笔记

来源:互联网 发布:java中排序函数 编辑:程序博客网 时间:2024/05/16 02:26

API文档地址http://www.blogjava.net/lucky/articles/33380.html


明确过滤的条件,以下拉列表框呈现
filterCell="droplist"

使用下拉列表,并数值用中文代替
<ec:column property="state" title="ForwarderManage.common.state" filterCell="droplist" filterOptions="verif_statusLabelValues">
     ${verif.state_name}
</ec:column>
//后台代码
List<LabelValue> verif_statusLabelValues= new ArrayList<LabelValue>();
 List<LabelValue> verif_statusLabelValues= new ArrayList<LabelValue>();
 Map<String,Object> map = DBCacheUtil.getTemp(Constants.DB_KEY_VERIFSTATE);
 verif_statusLabelValues.add(new LabelValue((String)map.get("0"),"0"));
 verif_statusLabelValues.add(new LabelValue((String)map.get("1"),"1"));
 verif_statusLabelValues.add(new LabelValue((String)map.get("2"),"2"));
 verif_statusLabelValues.add(new LabelValue((String)map.get("3"),"3"));
 model.addObject("verif_statusLabelValues",verif_statusLabelValues);    
                 
格式设置
cell="number" format="0.00"
cell="date" format="yyyy-MM-dd"
cell=”currency” format=”$###,###,##0.00”/
声明一个定制的format并在列中通过使用列的basis来使用它,我把这想象为named属性。因此如果你的 extremecomponents.properties文件如下所示:
table.format.myCustomDate=yy-MM-dd
那么列可以如下使用定制的format:<ec:column property="dateOfBirth" cell="date" format=”myCustomDate”>


去掉查询框
sortable="false" filterable="false"
showPagination="true"   页码
showStatusBar="true"    状态

 

增加事件

----------------------此方法不是扩展,投机取巧------------------------------------------------------------------
1.        <ec:row>
           <div onDoubleClick='doSomeThing()'> 
           </div>   //本人试了不管用
        </ec:row>
2.<ec:row class='xxxx'>  然后跟jQuery配合增加操作, $('.xxxx').dbclick();
3.$(function(){
    $("#worderInvoiceRefTab tr").each(function(index){
       if (index > 0){
           var id= $(this).find("td:eq(0)>input").val();
           $(this).css("cursor","hand");
           $(this).bind("dblclick",function(){
               location.href="${ctx}/MISPackWeb/ForwarderManage/WorkOrderInvoice.do?Action=edit&id="+id;
           });
          }
    });
});
-----------------------------------------------------------------------------------------------------
4.扩展eXtremeTable 行事件:
 
修改eXtremeTable 源码增加双击事件:
 
4.1.       修改extremecomponents.tld 文件找到Row Tag 增加属性ondblclick
      <attribute>
         <name>ondblclick</name>
         <required>false</required>
         <rtexprvalue>true</rtexprvalue>
           <description><![CDATA[The javascript ondblclick action -add by lovejj]]></description>
      </attribute>
4.2.       Row.java 文件增加ondblclick属性,并生成相应的get,set方法
        private String ondblclick;//add by lovejj
4.3.       HtmlBuilder.java 增加ondblclick 方法:
    /**
     * <p>The ondblclick attribute [ondblclick=].</p>
     */
 
    public HtmlBuilder ondblclick(String ondblclick) {
        if (StringUtils.isNotBlank(ondblclick)) {
             write(" ondblclick=\"").write(ondblclick).write("\" ");
        }
        return this;
    }
4.4.       RowBuilder.java 增加ondblclick方法:
    public void ondblclick() {//add by lovejj
 
        String ondblclick = row.getOndblclick();
 
        html.ondblclick(ondblclick);
 
    }
并修改该类中的    rowStart() 方法为:
    public void rowStart() {
        html.tr(1);
        styleClass();
        style();
        onclick();
        onmouseover();
        onmouseout();
        ondblclick();//默认是没有这一行的 add by loveJJ
        html.close();
    }

4.5.       修改RowTag.java 文件:
现在就进入到了关键的一步中,在Tag标签类中让其展现出来,首先增加属性
   private String ondblclick;//add by lovejj
然后生成该属性的set方法
    public void setOndblclick(String ondblclick) {
 
       this.ondblclick = ondblclick;
 
    }
并修改doStartTag()方法:
在else方法中增加一行:
  row.setOndblclick(TagUtils.evaluateExpressionAsString("ondblclick", ondblclick, this, pageContext));//add by lovejj
 
例如本人修改的doStartTag方法最后为:
    public int doStartTag() throws JspException {
        try {
            TableModel model = TagUtils.getModel(this);
            if (TagUtils.isIteratingBody(this)) {
                Row row = model.getRowHandler().getRow();
                row.setOnclick(TagUtils.evaluateExpressionAsString("onclick", onclick, this, pageContext));
                row.setOnmouseout(TagUtils.evaluateExpressionAsString("onmouseout", onmouseout, this, pageContext));
                row.setOnmouseover(TagUtils.evaluateExpressionAsString("onmouseover", onmouseover, this, pageContext));
                modifyRowAttributes(model, row);
                model.getRowHandler().modifyRowAttributes();
            } else {
                Row row = new Row(model);
                row.setHighlightClass(TagUtils.evaluateExpressionAsString("highlightClass", this.highlightClass, this, pageContext));
                row.setHighlightRow(TagUtils.evaluateExpressionAsBoolean("highlightRow", this.highlightRow, this, pageContext));
                row.setInterceptor(TagUtils.evaluateExpressionAsString("interceptor", this.interceptor, this, pageContext));
                row.setOnclick(TagUtils.evaluateExpressionAsString("onclick", onclick, this, pageContext));
                row.setOnmouseout(TagUtils.evaluateExpressionAsString("onmouseout", onmouseout, this, pageContext));
                row.setOnmouseover(TagUtils.evaluateExpressionAsString("onmouseover", onmouseover, this, pageContext));
                row.setStyle(TagUtils.evaluateExpressionAsString("style", style, this, pageContext));
                row.setStyleClass(TagUtils.evaluateExpressionAsString("styleClass", styleClass, this, pageContext));
                row.setOndblclick(TagUtils.evaluateExpressionAsString("ondblclick", ondblclick, this, pageContext));//add by lovejj
                addRowAttributes(model, row);
                model.addRow(row);
            }
        } catch (Exception e) {
            throw new JspException("RowTag.doStartTag() Problem: " + ExceptionUtils.formatStackTrace(e));
        }
        return EVAL_BODY_INCLUDE;
    }
 
OK到此修改完毕,
Test.jsp中即可加入
<ec:row ondblclick="alert('sd');">
进行测试了.

 

 

下面例子为在某个cell里展开详细信息,比如查看联系人,思想就是拼tr和td

<ec:table items="DataRecords" var="data" action="${pageContext.request.contextPath}/MISPackWeb/BankInfoManage/BankInfoController.do" showPagination="true" showStatusBar="true"
         title="" state="persist" tableId="BankInfoTab">
      <ec:row highlightRow="true">
       <ec:column alias="checkbox"  title=" " width="3%" headerCell="dkcheckbox" filterable="false" sortable="false" >
        <input name="dataId" id="dataId" type="checkbox" value="${data.id}">
       </ec:column>
          <ec:column property="numcode" title="BankInfoManage.bankinfo.numcode"/>
         <ec:column property="name" title="BankInfoManage.bankinfo.name">
          <span title="${data.name}">${fn:length(data.name)>8?fn:replace(data.name,fn:substring(data.name,8,fn:length(data.name)),'...') : data.name}</span>
         </ec:column>
         <ec:column alias="sort" title="BankInfoManage.bankinfo.sort">
          <c:if test="${data.sort==0}"><q:msg key="BankInfoManage.bankinfo.publicAcct"/></c:if>
          <c:if test="${data.sort==1}"><q:msg key="BankInfoManage.bankinfo.privateAcct" /></c:if>
         </ec:column>
       <ec:column property="openAcctName" title="BankInfoManage.bankinfo.openAcctName">
          <span title="${data.openAcctName}">${fn:length(data.openAcctName)>10?fn:replace(data.openAcctName,fn:substring(data.openAcctName,10,fn:length(data.openAcctName)),'...') : data.openAcctName}</span>
         </ec:column>
         <ec:column property="randomAnAcctNO" style="white-space:nowrap;" title="BankInfoManage.bankinfo.acct">
       <a href="javascript:showdetail('img${data.randomAnAcctNO}','${data.randomAnAcctNO}','${data.id}')"><img src="<c:url value="/images/icon/16x16/more.gif"/>" name="img${data.randomAnAcctNO}" border="0" align='bottom' id="img${data.randomAnAcctNO}" /></a>&nbsp;&nbsp;${data.randomAnAcctNO}
         </ec:column>
         <ec:column alias="isOpenNet" title="BankInfoManage.bankinfo.isOpenNet">${data.isOpenNet?'Y':'N'}</ec:column>
         <ec:column alias="state" title="BankInfoManage.bankinfo.state">${data.state==0?'N':'Y'}</ec:column>
         <ec:column property="openAcctTime" title="BankInfoManage.bankinfo.openAcctTime" cell="date" format="shortdatetime"/>
         <ec:column property="user.userName" title="BankInfoManage.bankinfo.user"/>
         <ec:column property="useable" title="BankInfoManage.bankinfo.use"/>
         <ec:column property="owner.userName" title="BankInfoManage.bankinfo.owner"/>
         <ec:column property="createTime" title="BankInfoManage.bankinfo.createTime" cell="date" format="shortdatetime" sortable="false" filterable="false"/>
         <ec:column alias="edit" title="0.operation.edit"  width="5%" style="text-align: center;" sortable="false" filterable="false">
       <a href="BankInfoController.do?Action=edit&id=${data.id}" ><img src="<c:url value="/images/icon_u_edit.gif"/>" width="16" height="16" border="0" align="absmiddle" alt="<QuickOATag:Message key="0.operation.edit"/>" title="<QuickOATag:Message key="0.operation.edit"/>"></a>
        <tr align="left">
        <td colspan="10" id="td${data.randomAnAcctNO}" style="display: none;">
       </ec:column>
      </ec:row>
    </ec:table>
   </div>
  </div>
 </div>

 <script type="text/javascript">
  function showdetail(imgName,randomAnAcctNO,bankInfoId){
   var img = document.getElementById(imgName);
         if (img.src.indexOf('more.gif') >= 0)
         {
             img.src = '<c:url value="/images/icon/16x16/less.gif"/>';
             jQuery('#td'+randomAnAcctNO).show();
        jQuery('#td'+randomAnAcctNO).html("<img src='${ctx}/images/loading.gif'/>正在加载联系人信息...");
        var acctHtml="";
        <c:forEach var ="data" items="${DataRecords}">
         if ("${data.id}"==bankInfoId){
          <c:forEach var ="acct" items="${data.accts}" varStatus="status">
           acctHtml+="${acct.currency.symbol} &nbsp;&nbsp;${acct.numcode}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;";
           if (${status.count}%5==0){
        acctHtml+="</br>";
       }
          </c:forEach>
         }
        </c:forEach>
        jQuery('#td'+randomAnAcctNO).html("<p><b>"+acctHtml+"</b></p>");
         }
         else
         {
             img.src = '<c:url value="/images/icon/16x16/more.gif"/>';
             jQuery('#td'+randomAnAcctNO).hide();
         }
  }

 </script>
</body>