eXtremeTable的改装

| Posted in JAVA技术 @ 2007/03/28 11:10 by 博爱老头

在一个项目中用到了extremetable，但是有些的体现形式还不符合业务的需求，所以做了些改动。下面贴出来，供大家参考：

主要增加功能：加入全选反选全不选的按钮，外观布置改动，增加table的td监听事件。

首先在http://extremecomponents.org/下载eXtremeComponents 1.0.1 的源码

修改org.extremecomponents.table.view.DefaultToolbar如下：

/*
 * Copyright 2004 original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package org.extremecomponents.table.view;

import java.util.Iterator;

import org.extremecomponents.table.bean.Export;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.html.BuilderConstants;
import org.extremecomponents.table.view.html.BuilderUtils;
import org.extremecomponents.table.view.html.TwoColumnTableLayout;
import org.extremecomponents.util.HtmlBuilder;

import com.ite.common.system.extremetable.CustomToolbarBuilder;

/**
 * @author Jeff Johnston
 *  alter by <a href="http://www.icnote.com" target="_blank" title="http://www.icnote.com" class="mykeyword">leo</a><img src="http://www.icnote.com/images/logo.gif" alt="leo" /> 2007 03 08
 */
public class DefaultToolbar extends TwoColumnTableLayout {
    public DefaultToolbar(HtmlBuilder html, TableModel model) {
        super(html, model);
    }

protected boolean showLayout(TableModel model) {
        boolean showPagination = BuilderUtils.showPagination(model);
        boolean showExports = BuilderUtils.showExports(model);
        boolean showTitle = BuilderUtils.showTitle(model);
        if (!showPagination && !showExports && !showTitle) {
            return false;
        }

return true;
    }

protected void columnLeft(HtmlBuilder html, TableModel model) {
        html.td(2).close();
        //new TableBuilder(html, model).title();
        html.append("选择：<a class=\"check\" href=\"#\" onclick=\"javascript:selectAll();\">全选</a>－");
        html.append("<a class=\"check\" href=\"#\" onclick=\"javascript:switchselect();\">反选</a>－");
        html.append("<a class=\"check\" href=\"#\" onclick=\"javascript:unselect();\">全不选</a> ");
        html.tdEnd();
    }

protected void columnRight(HtmlBuilder html, TableModel model) {
        boolean showPagination = BuilderUtils.showPagination(model);
        boolean showExports = BuilderUtils.showExports(model);

ToolbarBuilder toolbarBuilder = new ToolbarBuilder(html, model);
        //CustomToolbarBuilder toolbarBuilder = new CustomToolbarBuilder(html, model);

html.td(2).align("right").close();

html.table(2).border("0").cellPadding("0").cellSpacing("1").styleClass(BuilderConstants.TOOLBAR_CSS).close();

html.tr(3).close();

if (showPagination) {

html.td(4).close();
            toolbarBuilder.firstPageItemAsImage();
            html.tdEnd();

html.td(4).close();
            toolbarBuilder.prevPageItemAsImage();
            html.tdEnd();

html.td(4).close();
            toolbarBuilder.nextPageItemAsImage();
            html.tdEnd();

html.td(4).close();
            toolbarBuilder.lastPageItemAsImage();
            html.tdEnd();

html.td(4).close();
            toolbarBuilder.separator();
            html.tdEnd();

html.td(4).close();
      html.img();
      html.src(BuilderUtils.getImage(model, "pageDisplayed"));
      html.style("border:0");
      html.alt("当前页码");
      html.xclose();
      toolbarBuilder.pagesDisplayedDroplist();
      html.tdEnd();

html.td(4).close();
      toolbarBuilder.separator();
      html.tdEnd();
                   
            html.td(4).close();
            html.img();
            html.src(BuilderUtils.getImage(model, BuilderConstants.TOOLBAR_ROWS_DISPLAYED_IMAGE));
            html.style("border:0");
            html.alt("每页显示");
            html.xclose();
            toolbarBuilder.rowsDisplayedDroplist();
            html.tdEnd();

if (showExports) {
                html.td(4).close();
                toolbarBuilder.separator();
                html.tdEnd();
            }
        }

if (showExports) {
            Iterator iterator = model.getExportHandler().getExports().iterator();
            for (Iterator iter = iterator; iter.hasNext();) {
                //html.td(4).close();
              
              html.td(4).close();
                html.img();
                html.src(BuilderUtils.getImage(model, "ExcelExport"));
                //html.style("border:0");
                html.alt("导出为Excel");
                html.xclose();
              
                Export export = (Export) iter.next();
                toolbarBuilder.exportItemAsImage(export);
                html.tdEnd();
            }
        }

html.trEnd(3);

html.tableEnd(2);
        html.newline();
        html.tabs(2);

html.tdEnd();
    }
}

然后修改org.extremecomponents.table.view.HtmlView

import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.util.HtmlBuilder;

/**
 * @author Jeff Johnston alter by leo 2007 03 08
 */
public class HtmlView extends AbstractHtmlView {
    protected void beforeBodyInternal(TableModel model) {
        toolbar(getHtmlBuilder(), getTableModel());
        
        getTableBuilder().tableStart();

getTableBuilder().theadStart();
        
        //statusBar(getHtmlBuilder(), getTableModel());
        
        getTableBuilder().filterRow();

getTableBuilder().headerRow();

getTableBuilder().theadEnd();

getTableBuilder().tbodyStart();
    }

protected void afterBodyInternal(TableModel model) {
        getCalcBuilder().defaultCalcLayout();

getTableBuilder().tbodyEnd();

statusBar(getHtmlBuilder(), getTableModel());

getTableBuilder().tableEnd();
        
    }
    
    protected void toolbar(HtmlBuilder html, TableModel model) {
        new DefaultToolbar(html, model).layout();
    }

protected void statusBar(HtmlBuilder html, TableModel model) {
        new DefaultStatusBar(html, model).layout();
    }
}

下面是一个js的公共的函数，因为时间关系，没有融入到代码里面，以后会完善。现在只要include到jsp中就可以了。

<%@ page language="java" pageEncoding="gb2312"%>
<%
response.setHeader("Pragma","No-cache"); 
response.setHeader("Cache-Control","no-cache"); 
response.setDateHeader("Expires", 0); 
//create by leo 2007-03-08
%>
<link rel="stylesheet" type="text/css" href="../css/extremecomponents.css">
<script type="text/javascript">
    ///select all
    function selectAll() {
      var i = document.getElementsByName("checkbox").length;
      if (i == 1) {
        document.forms.ec.checkbox.checked = true;
      } else {
        if (i > 1) {
          for (i = 0; i < document.forms.ec.checkbox.length; i++) {
            document.forms.ec.checkbox[i].checked = true;
          }
        }
      }
    }
      
    //unselect all
    function unselect() {
      var i = document.getElementsByName("checkbox").length;
      if (i == 1) {
        document.forms.ec.checkbox.checked = false;
      } else {
        if (i > 1) {
          for (i = 0; i < document.forms.ec.checkbox.length; i++) {
            document.forms.ec.checkbox[i].checked = false;
          }
        }
      }
    }
      
    ///switchselect
    function switchselect() {
      var i = document.getElementsByName("checkbox").length;
      if (i == 1) {
        document.forms.ec.checkbox.checked = !document.forms.ec.checkbox.checked;
      } else {
        if (i > 1) {
          for (i = 0; i < document.forms.ec.checkbox.length; i++) {
            document.forms.ec.checkbox[i].checked = !document.forms.ec.checkbox[i].checked;
          }
        }
      }
    }

//table event
  function runTableOnClick(TableHandle){
    var e = event.srcElement;
    //alert("e.tagName is "+e.tagName);
    //alert("e.rowIndex is "+e.rowIndex);
    //alert("e.parentElement is "+e.parentElement);
    
    if(typeof(e.tagName)=='undefined') return;  
    if (e.tagName == 'TABLE' || e.tagName == 'TR' || e.tagName == 'TBODY') return;
    while (e.tagName != 'TR') e = e.parentElement;
    //alert("e.tagName is "+e.tagName);
    if (e.rowIndex == 0 || e.className == 'itemDisabled') return;
    var el = e;
    while (el.tagName != 'TABLE') el = el.parentElement;
    //alert("el.rows.length is "+el.rows.length);
    for (var i = 0; i < el.rows.length; i++){
      if (el.rows(i).className == 'itemOver'){
        el.rows(i).className = 'itemOut';
        break;
      }
    }
    e.className = 'itemOver';
    //if (TableHandle != null){
    //  if (event.button == 2) menuShow(TableHandle); else menuHide(TableHandle);
    //}
    }
    
    //number only
    function JHshNumberText()
            {
              if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57))&& (window.event.keyCode <= 90)))
                {
                  window.event.keyCode = 0 ;
                  alert("请输入0-9之间的字符!");
                }
            }  
</script>

就这样，预览效果如下：

作者：博爱老头@博爱老头的草屋
地址：http://www.icnote.com/Extreme-Table/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！

最新日志		随机日志		综合排行
	用java将本地化语言转换... ThrottleLock ... 新年快乐 [music] Sisse... 可口的三文鱼你不知道的故... [music] 听歌时间-... 平安夜杂记 DOPOD S900 官方... [music]好冷。。音乐... j2ee中session的...		做人不能太CNN 终于在fc6下把TL－WN... 暴雪官网公布星际争霸2虫族... 商务部：中国首个网上交易法... [怀念][珍藏] Bruc... 还是听歌。。。。垃圾、骗人短信，屡禁不止神七进入待发射状态附轨道... 冬天来了。。中国参建人造太阳百亿欧元...		java msn机器人 JSTL详解终于在fc6下把TL－WN... eXtremeTable的... DES加密、解密字符串算法... IDC sees $49 ... eclipse 安装pyt... 放假早起，听到熟悉经典的音... 测试Issue管理利器JI... Waiting for f...

文章来自: 本站原创

Tags: java技术

今天的天气真好啊。

一个有意思的逻辑题目：）

chenxi3021 Said,

2008/07/31 14:16

html.td(2);
这句怎么理解？

博爱老头回复于 2008/07/31 14:25

第几个TD

chenxi3021

Said,

2008/07/30 16:26

我看了HtmlBuilde.HtmlBuilder类，里面有好多方法，比如下面两个能详细说明一下吗，谢谢
public HtmlBuilder table(int tabs) {
        newline();
        tabs(tabs);
        write("<table");

        return this;
    }

public HtmlBuilder tabs(int tabs) {
        for (int i = 0; i < tabs; i++) {
            tab();
        }

        return this;
    }
这两个方法各什么意思呢？

博爱老头回复于 2008/07/30 17:27

设置属性了之后，返回本实例。

chenxi3021

Said,

2008/07/29 17:45

博爱老头：
你好!
我看了你的例子有点启发，我现在用的是eXtremeComponents-1.0.1 我想把翻页导出放到下面来，我就是还不太明白它是怎么来生成html代码的,希望博爱老头能忙帮我。非常感谢能留个你的联系方式吗，这里不方便的话可以发到我的信箱，chenxi3021@163.com ，如果能帮忙我可以给你酬劳的。

博爱老头回复于 2008/07/29 18:44

你看看org.extremecomponents.util。HtmlBuilde.HtmlBuilder就知道了。

Jane Said,

2008/06/28 18:28

您好，最近才发现extremetable，但是官网不能访问了。麻烦您给一份extremetable的源码吧。谢谢. zhoulanok@gmail.com

博爱老头回复于 2008/06/28 18:39

我要找找看，找到了发給你吧。

star Said,

2008/06/02 01:02

超赞博主！谢谢啦！

博爱老头回复于 2008/06/02 08:59

不用