eXtremeTable的改装

2007/03/28 @ 11:10

在一个项目中用到了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 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/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！

最新日志		随机日志		综合排行
	闷热的周末今年第一次... 四年的等待今天凌晨完... 无言看世界杯谈球今天美国全国公共电台（... 端午节 Echoes ... 2010 凯立德春季... 对MFT主分区表损坏移... 最近成了“黄脸婆” ... 纯吐槽：最近连续的被杯... Fedora 13 f...		补漏：长按结束键OEM... 服务器安全评估标准 Fedora 10 c... 新漫游最迟4月执行,两... PMP认证考试报名开始... 胡紫薇大闹央视被解职,... 炎热的天气杂事杂记这年头收传单的也多了 Fedora 13 &... 北京WIFI-CITY...		java msn机器... DES加密、解密字符串... eclipse 安装p... JSTL详解 eXtremeTabl... 终于在fc6下把TL－... 完美解决win7下玩星... IDC sees $4... 测试Issue管理利器... Waiting for...

Tags: java技术

分类: JAVA技术 | 评论(25) | 阅读(11067)

今天的天气真好啊。

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

niuniu

2010/01/20 10:41

老头您好！最近项目也打算用这控件，可是扩展起来感觉有些费事，由于刚参加工作不久，底子薄，能不能把你修改后的源码给小弟分享一下，不胜感激。

博爱老头回复于 2010/01/20 11:31

很多年前的东西了，现在几乎找不到了，上面就是源码，你看看吧。。现在这方面的开源控件很多，这个已经停止开发了，找找新的啊。

SHENJP

2009/12/21 21:42

老头您好！我也是初学者，晚上用你的方法，都改好了，可用源码的test.jsp就是出不来你说的那效果，是不是我下的源码有问题？最好能有源码的架构说明。帮帮我，谢谢。

失意

2009/10/30 09:56

博爱老头:你好！我源代码修改后如何编译啊，我修改后的单个文件编译会出错，编译不成功。能告诉我怎么编译的吗？谢谢！！

博爱老头回复于 2009/10/30 11:22

如果是eclipse等工具的话，会自动编译，至于报错就要看报什么错误了。

失意

2009/10/29 20:30

你好，能不能也给我发一份，我也遇到了这个问题。谢谢了！ 77860101@qq.com

博爱老头回复于 2009/10/30 09:39

这个貌似找不到了。你直接看上面的代码把。

cww_wx

2009/05/23 14:54

哦，这样啊，谢谢，楼主了，能把以前你研究的源代码共享一下吗？
chengtwocow@126.com
感激！

博爱老头回复于 2009/05/23 22:36

代码找不到了，下原包之后，按照上面的修改吧。

cww_wx

2009/05/23 09:13

楼主，看来你已经研究这个很久了，由于项目需求，需要将checkbox的选中的行导出来，那么该怎么办！而且分页时如何保存选中的checkbox状态！
项目很急，盼楼主及时指点，希望能有个例子指点一下！我的邮箱地址是
chengtwocow·126.com

博爱老头回复于 2009/05/23 13:24

这是很久以前的东西了啊。。没有看过了，但是你说的版次checkbox的状态，就要看你翻页是怎么翻的了，如果是提交表单，就用一个隐藏域保存下来就行了。。但是这样处理有session的问题。

鲍海昕

2008/12/19 17:01

哈哈。。。我把选页的下拉改成输入形式了。哈哈。。
就是第>2<页 go>>
go>>是个链接。。。哈哈
很感激你。。。。。
改的我废老劲了。。嘿嘿

博爱老头回复于 2008/12/19 18:47

鲍海昕

2008/12/19 14:40

呵呵。。。。反正谢谢了。。。
十分感谢。。。
收藏了。。。
以后多来学习。。。。

鲍海昕

2008/12/19 11:56

......还有个类没有。。。还得麻烦你。。。。

CustomTableActions这个类。。。找不到。。。

博爱老头回复于 2008/12/19 14:17

呵呵。。到这里交流吧。

鲍海昕

2008/12/19 11:56

太谢谢了。。交个朋友好吗？
我的qq 32246910
牛人还很大方。。。。。
呵呵。。。。我东北的。。喜欢交朋友。。。

......还有个类没有。。。还得麻烦你。。。。

CustomTableActions这个类。。。找不到。。。

博爱老头回复于 2008/12/19 14:17

package com.ite.common.system.extremetable;

import org.extremecomponents.table.core.TableConstants;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.html.BuilderUtils;
import org.extremecomponents.table.view.html.TableActions;

public class CustomTableActions extends TableActions {
  public CustomTableActions(TableModel model) {
    super(model);
  }

  public String getPageAction() {
    TableModel model = getTableModel();

    StringBuffer action = new StringBuffer("javascript:");

    action.append(getClearedExportTableIdParameters());

    String form = BuilderUtils.getForm(model);
    action.append("document.forms.").append(form).append(".");
    action.append(model.getTableHandler().prefixWithTableId()).append(
        TableConstants.PAGE);
    String page = "this.options[this.selectedIndex].value";
    action.append(".value=").append(page).append(";");

    action.append(getOnInvokeAction());

    return action.toString();
  }
}

分页： 1/3

1 2 3

Categories

Entries

Comments

Archive