Dorado 5 : 5.5.表格功能测试-事件测试 (T22)

This page last changed on Apr 09, 2013 by ivan.yi@bstek.com.

概述

本示例主要来展示如何在客户端对DataTable的事件进行更改。本示例链接如下：

http://61.151.239.187/dorado5/skills/table/test/table-events.jsp

 

准备工作

新建一工程tableevents，并且配置好数据库，具体步骤参考3.1.2节。

开发步骤

添加Dataset

步骤1：添加一Common ViewModel，文件名为TableEvents。
为TableEvents添加一ViewModel，代码如下：

 import java.util.HashMap;
import java.util.Map;
import com.bstek.dorado.common.DoradoContext;
import com.bstek.dorado.data.Dataset;
import com.bstek.dorado.data.ParameterSet;
import com.bstek.dorado.view.DefaultViewModel;
/**
 * EventsViewViewModel
 */
public class EventsViewViewModel extends DefaultViewModel {
    protected void doUpdateData(ParameterSet parameters,
            ParameterSet outParameters) throws Exception {
        Map localColumnEvents = new HashMap();
        Dataset datasetColumns = getDataset("datasetColumns");
        datasetColumns.moveFirst();
        while (!datasetColumns.isLast()) {
            String column = datasetColumns.getString("column");
            Dataset datasetColumnEvents = getDataset("datasetColumnEvents");
            Map scripts = new HashMap();
            datasetColumnEvents.moveFirst();
            while (!datasetColumnEvents.isLast()) {
                scripts.put(datasetColumnEvents.getString("eventName"),
                        datasetColumnEvents.getString("script"));
                datasetColumnEvents.moveNext();
            }
            localColumnEvents.put(column, scripts);
            datasetColumns.moveNext();
        }
        DoradoContext context = DoradoContext.getContext();
        context.setAttribute(DoradoContext.SESSION, "localColumnEvents",
                localColumnEvents);
        super.doUpdateData(parameters, outParameters);
    }
}

步骤2：添加一CustomDataset，属性设置如下：

属性

值

id

datasetEvents

insertOnEmpty

true

为其添加5个Field，如下所示：

dataType

label

name

string

事件

event

 

参数

parameters

string

事件代码

script

 

 

sample

 

说明

remark

为datasetEvents添加一Dataset Listener，代码如下：

import com.bstek.dorado.data.AbstractDatasetListener;
import com.bstek.dorado.data.Dataset;
/**
 * DatasetEventsListener
 */
public class EventsListener extends AbstractDatasetListener {
    public void afterLoadData(Dataset dataset) throws Exception {
        String onActive = "<table><tr><td><hr></td></tr><tr><td><A NAME=onActive><!-- --></A><h3>onActive</h3></td></tr>"
                + "    <tr><td><FONT CLASS='SampleItemFont'><pre>public void&nbsp;<B>onActive</B>(DataTable&nbsp;table)</pre></font></td></tr>"
                + "    <tr><td><FONT CLASS='TitleItemFont'><DD><DL><DT>当控件被激活时触发的事件</DT></DL></td></tr>"
                + "            <tr><td><FONT CLASS='ParamsItemFont'><DD><b>Parameters</b></DD></FONT></td></tr>"
                + "            <tr><td><FONT CLASS='ParamItemFont'><DD><DD>table&nbsp;-&nbsp;DataTable&nbsp;-&nbsp;被激活的控件</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ReturnItemFont'><DD><DL><DT><b>Returns:</b><DD><CODE>void</CODE></DL></DT></FONT></td></tr>"
                + "                            </table>";
        String onBlur = "<table><tr><td><hr></td><tr><td><A NAME=onBlur><!-- --></A><h3>onBlur</h3></td></tr>"
                + "    <tr><td><FONT CLASS='SampleItemFont'><pre>public void&nbsp;<B>onBlur</B>(DataTable&nbsp;table)</pre></font></td></tr>"
                + "    <tr><td><FONT CLASS='TitleItemFont'><DD><DL><DT>当表格失去焦点时触发的事件</DT></DL></td></tr>"
                + "            <tr><td><FONT CLASS='ParamsItemFont'><DD><b>Parameters</b></DD></FONT></td></tr>"
                + "            <tr><td><FONT CLASS='ParamItemFont'><DD><DD>table&nbsp;-&nbsp;DataTable&nbsp;-&nbsp;触发事件的表格</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ReturnItemFont'><DD><DL><DT><b>Returns:</b><DD><CODE>void</CODE></DL></DT></FONT></td></tr>"
                + "                           </table>";
        String onFocus = "<table><tr><td><hr></td><tr><td><A NAME=onFocus><!-- --></A><h3>onFocus</h3></td></tr>"
                + "    <tr><td><FONT CLASS='SampleItemFont'><pre>public void&nbsp;<B>onFocus</B>(DataTable&nbsp;table)</pre></font></td></tr>"
                + "    <tr><td><FONT CLASS='TitleItemFont'><DD><DL><DT>当表格获得焦点时触发的事件</DT></DL></td></tr>"
                + "            <tr><td><FONT CLASS='ParamsItemFont'><DD><b>Parameters</b></DD></FONT></td></tr>"
                + "            <tr><td><FONT CLASS='ParamItemFont'><DD><DD>table&nbsp;-&nbsp;DataTable&nbsp;-&nbsp;触发事件的表格</FONT></td></tr>"
                + "            <tr><td><FONT CLASS='ReturnItemFont'><DD><DL><DT><b>Returns:</b><DD><CODE>void</CODE></DL></DT></FONT></td></tr>"
                + "                    </table>";
        String onHeaderClick = "<table><tr><td><hr></td><tr><td><A NAME=onHeaderClick><!-- --></A><h3>onHeaderClick</h3></td></tr>"
                + "    <tr><td><FONT CLASS='SampleItemFont'><pre>public Boolean&nbsp;<B>onHeaderClick</B>(DataTable&nbsp;table,&nbsp;object&nbsp;cell,&nbsp;Column&nbsp;column)</pre></font></td></tr>"
                + "    <tr><td><FONT CLASS='TitleItemFont'><DD><DL><DT>数据表格中列头的单击事件</DT></DL></td></tr>"
                + "            <tr><td><FONT CLASS='ParamsItemFont'><DD><b>Parameters</b></DD></FONT></td></tr><tr><td><FONT CLASS='ParamItemFont'><DD><DD>table&nbsp;-&nbsp;DataTable&nbsp;-&nbsp;触发事件的表格</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ParamItemFont'><DD><DD>cell&nbsp;-&nbsp;object&nbsp;-&nbsp;触发事件的srcElement</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ParamItemFont'><DD><DD>column&nbsp;-&nbsp;Column&nbsp;-&nbsp;触发事件的Column</FONT></td></tr>"
                + "                            <tr><td><FONT CLASS='ReturnItemFont'><DD><DL><DT><b>Returns:</b><DD><CODE>void</CODE></DL></DT></FONT></td></tr>"
                + "                                    </table>";
        String onRecordClick = "<table><tr><td><hr></td><tr><td><A NAME=onRecordClick><!-- --></A><h3>onRecordClick</h3></td></tr>"
                + "    <tr><td><FONT CLASS='SampleItemFont'><pre>public void&nbsp;<B>onRecordClick</B>(DataTable&nbsp;table,&nbsp;object&nbsp;cell,&nbsp;Column&nbsp;column)</pre></font></td></tr>"
                + "    <tr><td><FONT CLASS='TitleItemFont'><DD><DL><DT>数据表格中数据行的单击事件</DT></DL></td></tr>"
                + "            <tr><td><FONT CLASS='ParamsItemFont'><DD><b>Parameters</b></DD></FONT></td></tr><tr><td><FONT CLASS='ParamItemFont'><DD><DD>table&nbsp;-&nbsp;DataTable&nbsp;-&nbsp;触发事件的表格</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ParamItemFont'><DD><DD>cell&nbsp;-&nbsp;object&nbsp;-&nbsp;触发事件的srcElement</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ParamItemFont'><DD><DD>column&nbsp;-&nbsp;Column&nbsp;-&nbsp;触发事件的Column</FONT></td></tr>"
                + "                            <tr><td><FONT CLASS='ReturnItemFont'><DD><DL><DT><b>Returns:</b><DD><CODE>void</CODE></DL></DT></FONT></td></tr>"
                + "                                    </table>";
        String onRecordDblClick = "<table><tr><td><hr></td><tr><td><A NAME=onRecordDblClick><!-- --></A><h3>onRecordDblClick</h3></td></tr>"
                + "    <tr><td><FONT CLASS='SampleItemFont'><pre>public void&nbsp;<B>onRecordDblClick</B>(DataTable&nbsp;table,&nbsp;object&nbsp;cell,&nbsp;Column&nbsp;column)</pre></font></td></tr>"
                + "    <tr><td><FONT CLASS='TitleItemFont'><DD><DL><DT>数据表格中数据行的双击事件</DT></DL></td></tr>"
                + "            <tr><td><FONT CLASS='ParamsItemFont'><DD><b>Parameters</b></DD></FONT></td></tr><tr><td><FONT CLASS='ParamItemFont'><DD><DD>table&nbsp;-&nbsp;DataTable&nbsp;-&nbsp;触发事件的表格</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ParamItemFont'><DD><DD>cell&nbsp;-&nbsp;object&nbsp;-&nbsp;触发事件的srcElement</FONT></td></tr>"
                + "                    <tr><td><FONT CLASS='ParamItemFont'><DD><DD>column&nbsp;-&nbsp;Column&nbsp;-&nbsp;触发事件的Column</FONT></td></tr>"
                + "                            <tr><td><FONT CLASS='ReturnItemFont'><DD><DL><DT><b>Returns:</b><DD><CODE>void</CODE></DL></DT></FONT></td></tr>"
                + "                                    </table>";
        StringBuffer css = null;
        dataset.insertRecord();
        dataset.setString("event", "onActive");
        dataset.setString("parameters", "table");
        css = new StringBuffer("alert(\"Event Name: onActive\");\n");
        css.append("alert(\"srcElement:\"+table.getId());");
        dataset.setString("sample", css.toString());
        dataset.setString("remark", onActive);
        dataset.insertRecord();
        dataset.setString("event", "onBlur");
        dataset.setString("parameters", "table");
        css = new StringBuffer("alert(\"Event Name: onBlur\");\n");
        css.append("alert(\"srcElement:\"+table.getId());");
        dataset.setString("sample", css.toString());
        dataset.setString("remark", onBlur);
        dataset.insertRecord();
        dataset.setString("event", "onFocus");
        dataset.setString("parameters", "table");
        css = new StringBuffer("alert(\"Event Name: onFocus\");\n");
        css.append("alert(\"srcElement:\"+table.getId());");
        dataset.setString("sample", css.toString());
        dataset.setString("remark", onFocus);
        dataset.insertRecord();
        dataset.setString("event", "onHeaderClick");
        dataset.setString("parameters", "table, cell, column");
        css = new StringBuffer(
                "var msg = \"Event Name: onRecordDblClick\\n\";\n");
        css.append("msg += \"table:\"+table.getId()+\"\\n\";\n");
        css.append("msg += \"column:\"+column.getName();\n");
        css.append("alert(msg);");
        dataset.setString("sample", css.toString());
        dataset.setString("remark", onHeaderClick);
        dataset.insertRecord();
        dataset.setString("event", "onRecordClick");
        dataset.setString("parameters", "table, cell, column");
        css = new StringBuffer(
                "var msg = \"Event Name: onRecordDblClick\\n\";\n");
        css.append("msg += \"table:\"+table.getId()+\"\\n\";\n");
        css.append("msg += \"column:\"+column.getName();\n");
        css.append("alert(msg);");
        dataset.setString("sample", css.toString());
        dataset.setString("remark", onRecordClick);
        dataset.insertRecord();
        dataset.setString("event", "onRecordDblClick");
        dataset.setString("parameters", "table, cell, column");
        css = new StringBuffer(
                "var msg = \"Event Name: onRecordDblClick\\n\";\n");
        css.append("msg += \"table:\"+table.getId()+\"\\n\";\n");
        css.append("msg += \"column:\"+column.getName();\n");
        css.append("alert(msg);");
        dataset.setString("sample", css.toString());
        dataset.setString("remark", onRecordDblClick);
    }
}

 

为datasetEvents的beforeInsert事件添加如下代码：

 return new AbortException();

步骤3：添加一CustomDataset，属性设置如下：

属性

值

id

datasetColumns

readOnly

true

为其添加2个字段，如下所示：

label

name

 

column

列名

label

为datasetColumns的afterScroll的事件添加如下代码：

 datasetColumnEvents.parameters().setValue("column",dataset.getValue("column")); 
 datasetColumnEvents.flushData(); 
 datasetColumnEvents.refreshControls();

添加一Simple Class，类名为ColumnHelper，代码如下：

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.bstek.dorado.utils.StringHelper;
import com.bstek.dorado.utils.xml.XmlBuilder;
import com.bstek.dorado.utils.xml.XmlDocument;
import com.bstek.dorado.utils.xml.XmlFactory;
import com.bstek.dorado.utils.xml.XmlNode;
import com.bstek.dorado.utils.xml.XmlParseException;
public class ColumnHelper {
    public static Map getColumnInfos() throws XmlParseException, IOException {
        Map map = new HashMap();
        String resource = "TableEvents.view.xml";
        String controlId = "tableEmployee";
        try {
            InputStream in = ColumnHelper.class.getResourceAsStream(resource);
            if (in != null) {
                try {
                    XmlBuilder builder = XmlFactory.createXmlBuilder();
                    XmlDocument doc = builder.buildDocument(in);
                    XmlNode tableNode = doc.getNodeById(controlId);
                    XmlNode[] columnNodes = tableNode.getNodesByXPath("Column");
                    for (int i = 0; i < columnNodes.length; i++) {
                        String columnName = columnNodes[i].getAttribute("name");
                        String label = getLabel(doc, columnNodes[i]);
                        Map scripts = getScripts(columnNodes[i]);
                        List list = new ArrayList();
                        list.add(columnName);
                        list.add(label);
                        list.add(scripts);
                        map.put(columnName, list);
                    }
                } finally {
                    in.close();
                }
            }
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return map;
    }
    private static String getLabel(XmlDocument doc, XmlNode columnNode) {
        String datasetId = columnNode.getParent().getAttribute("dataset");
        XmlNode datasetNode = doc.getNodeById(datasetId);
        String label = columnNode.getAttribute("label");
        if (StringHelper.isEmpty(label)) {
            String fieldName = columnNode.getAttribute("field");
            XmlNode fieldNode = getFieldNode(datasetNode, fieldName);
            if (fieldNode != null) {
                label = fieldNode.getAttribute("label");
            }
        }
        return label;
    }
    private static Map getScripts(XmlNode columnNode) {
        Map map = new HashMap();
        XmlNode eventsNode = columnNode.getChild("Events");
        if (eventsNode != null) {
            XmlNode[] eventNodes = eventsNode.getChildren();
            for (int i = 0; i < eventNodes.length; i++) {
                XmlNode eventNode = eventNodes[i];
                String eventName = eventNode.getAttribute("name");
                String script = eventNode.getContent();
                if (StringHelper.isNotEmpty(script)) {
                    map.put(eventName, script);
                }
            }
        }
        return map;
    }
    private static XmlNode getFieldNode(XmlNode datasetNode, String fieldName) {
        XmlNode node = null;
        XmlNode fieldsNode = datasetNode.getChild("Fields");
        if (fieldsNode != null) {
            XmlNode[] fields = fieldsNode.getChildren();
            for (int i = 0; i < fields.length; i++) {
                XmlNode field = fields[i];
                if (field.getAttribute("name").equals(fieldName)) {
                    node = field;
                    break;
                }
            }
        }
        return node;
    }
}

为datasetColumns添加一Dataset Listener，代码如下：

import java.util.Iterator;
import java.util.List;
import java.util.Map;
import com.bstek.dorado.data.AbstractDatasetListener;
import com.bstek.dorado.data.Dataset;
/**
 * ColumnsListener
 */
public class ColumnsListener extends AbstractDatasetListener {
    public void afterLoadData(Dataset dataset) throws Exception {
        Map map = ColumnHelper.getColumnInfos();
        Iterator iter = map.keySet().iterator();
        while (iter.hasNext()) {
            String columnName = (String) iter.next();
            List list = (List) map.get(columnName);
            dataset.insertRecord();
            dataset.setString("column", columnName);
            dataset.setString("label", (String) list.get(1));
        }
    }
}

步骤4：添加一CustomDataset，id设置为datasetColumnEvents，其他属性不变，为其添加字段如下：

dataType

label

name

 

 

column

 

 

label

string

事件列表

event

string

事件代码

script

 

 

parameters

 

 

sample

为datasetColumnEvents添加一Dataset Listener，代码如下：

import java.util.List;
import java.util.Map;
import com.bstek.dorado.data.AbstractDatasetListener;
import com.bstek.dorado.data.Dataset;
import com.bstek.dorado.utils.StringHelper;
/**
 * ColumnEventsListener
 */
public class ColumnEventsListener extends AbstractDatasetListener {
    public void afterLoadData(Dataset dataset) throws Exception {
        Map columnInfos = ColumnHelper.getColumnInfos();
        String column = dataset.parameters().getString("column");
        if (StringHelper.isNotEmpty(column)) {
            List list = (List) columnInfos.get(column);
            Map scripts = (Map) list.get(2);
            dataset.insertRecord();
            dataset.setString("event", "onRefresh");
            dataset.setString("parameters", "column, row, cell, value, record");
            dataset.setString("sample", (String) scripts.get("onRefresh"));
            dataset.insertRecord();
            dataset.setString("event", "onCreateCellRenderer");
            dataset.setString("parameters", "column");
            dataset.setString("sample", (String) scripts
                    .get("onCreateCellRenderer"));
            dataset.insertRecord();
            dataset.setString("event", "onFooterRefresh");
            dataset.setString("parameters", "column, cell, value");
            dataset
                    .setString("sample", (String) scripts
                            .get("onFooterRefresh"));
            dataset.insertRecord();
            dataset.setString("event", "onGetCellEditor");
            dataset.setString("parameters", "column, cell, editor, record");
            dataset
                    .setString("sample", (String) scripts
                            .get("onGetCellEditor"));
            dataset.insertRecord();
            dataset.setString("event", "onHeaderRefresh");
            dataset.setString("parameters", "column, cell, value");
            dataset
                    .setString("sample", (String) scripts
                            .get("onHeaderRefresh"));
        }
    }
}

步骤5：添加一AutoSqlDataset，选中Employee表，如下图所示的字段。

该AutoSqlDataset的id设置为datasetEmployee，其他属性不变。

添加表格事件列表部分

步骤1：添加一DataTable，属性设置如下：

属性

值

dataset

datasetEvents

height

100%

id

tableEvents

readOnly

true

showHScrollBar

false

showHeader

false

showIndicator

false

showVScrollBar

false

width

100%

选中datasetEvents，点击生成字段按钮。只保留event字段，其他的字段删除。为event字段的onRefresh事件添加如下代码：

 cell.innerHTML = value+"("record.getValue("parameters")")"; 
 return false;

步骤2：添加一Button，属性设置如下：

属性

值

id

buttonAppendEvents1

value

保存并预览

为buttonAppendEvents1的onClick事件添加如下代码：

if (datasetEvents.getCurrent()){ 
	 var event = datasetEvents.getString("event"); 
	 var parameters = datasetEvents.getString("parameters"); 
	 var script = datasetEvents.getString("script"); 
	 if (script.length>0){ 
		 eval("var func = function("parameters"){"script"}"); 
		 EventManager.clearDoradoEvent(tableEmployee, event); 
		 EventManager.addDoradoEvent(tableEmployee, event, func); 
	 } 
}

步骤3：添加一AutoForm，属性设置如下：

属性

值

dataset

datasetEvents

id

formEvents

首先为formEvents添加一FormGroup，并且设置该FormGroup的columnCount为1。然后为formEvents添加一TextEditor Element，属性设置如下：

属性

值

field

script

name

script

showLabel

false

设置script节点下面的TextEditor的属性如下：

属性

值

editorType

textarea

height

200

为formEvents添加一Custom Element，属性设置如下：

属性

值

controlAlign

center

controllId

buttonAppendEvents1

name

element1

showLabel

false

步骤4：添加一DataLabel，属性设置如下：

属性

值

dataset

datasetEvents

field

remark

id

datalabelRemark

为datalabelRemark的onRefresh事件添加如下代码：

 label.innerHTML=value; 
 return false;

添加列事件列表部分

步骤1：添加一DataTable，属性设置如下：

属性

值

dataset

datasetColumns

height

100%

id

tableColumns

showHScrollBar

false

showIndicator

false

width

100%

选中tableColumns，点击字段生成按钮。只保留label字段，其他的删除。
步骤2：添加一DataTable，属性设置如下：

属性

值

dataset

datasetColumnEvents

height

100%

id

tableColumnEvents

showHScrollBar

false

showIndicator

false

width

100%

选中datasetColumnEvents，点击字段生成按钮。只保留event字段，其他字段删除。为event字段的onRefresh事件添加如下代码：

 cell.innerHTML = value+"\n("record.getValue("parameters")")"; 
 return false;

为event字段的onHeaderRefresh事件添加代码如下：

if (datasetColumns.getCurrent()){ 
	 var label = datasetColumns.getValue("label"); 
	 cell.innerHTML = "["label"]"+value; 
} 
else 
	 cell.innerHTML = value; 
return false;

步骤3：添加一Button，属性设置如下：

属性

值

id

buttonAppendEvents2

value

保存并预览

为buttonAppendEvents2的onClick事件添加如下代码：

if (datasetColumns.getCurrent() && datasetColumnEvents.getCurrent()){
  var columnName = datasetColumns.getValue("column");
  var eventName = datasetColumnEvents.getString("event");
  var parameters = datasetColumnEvents.getString("parameters");
  var script = datasetColumnEvents.getString("script");
  if (script.length>0){
    eval("var func = function("+parameters+"){"+script+"}");
    var column = tableEmployee.getColumn(columnName);
    EventManager.clearDoradoEvent(column, eventName);
    EventManager.addDoradoEvent(column, eventName, func);
    
    switch(eventName){
      case "onHeaderRefresh ":
      tableEmployee.refreshHeader();
      break;
      case "onFooterRefresh":
      tableEmployee.refreshFooter();
      break;
      case "onRefresh":
      tableEmployee.refresh();
      break;
    }
  }
}

步骤4：添加一AutoForm，属性设置如下：

属性

值

dataset

datasetColumnEvents

id

formColumnEvents

为formColumnEvents添加一FormGroup，并且设置该FormGroup的columnCount为1。然后为formColumnEvents添加一TextEditor Element，属性设置如下：

属性

值

field

script

name

script

showLabel

false

设置script节点下面的TextEditor的属性如下：

属性

值

editorType

textarea

height

200

为formColumnEvents添加一Custom Element，属性设置如下：

属性

值

controlAlign

center

controllId

buttonAppendEvents2

name

element1

showLabel

false

步骤5：添加一DataLabel，属性设置如下：

属性

值

dataset

datasetColumnEvents

field

sample

id

datalabelColumnSample

步骤6：添加一DataLabel，属性设置如下：

属性

值

dataset

datasetEvents

field

sample

id

datalabelSample

步骤7：添加一OutLookBar，属性设置如下：

属性

值

animated

false

id

outlookBar1

 

添加预览窗口部分

步骤1：添加一ListDropDown，属性设置如下：

属性

值

autoDropDown

true

id

dropdownSex

mapValue

true

为dropdownSex添加两个DropDownItem。第一个DropDownItem的name设置为"男"，value设置为true。第二个DropDownItem的name设置为"女"，value设置为false。
设置datasetEmployee的sex字段的dropdown为dropdownSex。
步骤2：添加一DataTable，属性设置如下：

属性

值

dataset

datasetEmployee

height

100%

highlightSelection

false

id

tableEmployee

width

100%

选中tableEmployee，点击生成字段按钮。
步骤3：删除多余字段，最后剩余的字段如下：

步骤4：为View的<<functions>>事件添加如下代码：

function raiseSalary(adjust) { 
	 var record = event.srcElement.parentElement.record; 
	 datasetEmployee.setCurrent(record); 
	 datasetEmployee.setValue("salary", datasetEmployee.getValue("salary") + adjust); 
}

步骤5：选中tableEmployee的EMPLOYEE_NAME字段，为其onRefresh 事件添加如下代码：

cell.innerHTML = value+"("datasetEmployee.getValue("employee_id")")"; 
return false;

步骤6：为SALARY字段的onRefresh 事件添加如下代码：

var salary = record.getValue("salary"); 
if( salary > 5000){ 
	 cell.style.color = "red"; 
} 
else{ 
	 cell.style.color = ""; 
} 
cell.innerHTML="$"value"/month"; 
return false;

步骤7：为WEB字段的onRefresh 事件添加如下代码：

cell.innerHTML = "<a href=\"http://"value"\" target=\"_blank\""">"+value"</a>"; 
return false;

步骤8：选中tableEmployee，为tableEmployee添加一column，name设置为action。
步骤9：为action字段的onRefresh 事件添加如下代码：

var html = "<button onclick=\"raiseSalary(1000);\" style=\"border-width:1px\">加薪</button> " + 
 "<button onclick=\"raiseSalary(-1000);\" style=\"border-width:1px\">减薪</button>"; 
cell.innerHTML = html; 
cell.record = record; 
return false;

创建Jsp页面

为tableEvents生成Jsp页面，并对其进行编辑，最后结果如下：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title>表格事件设置</title> 
 <LINK REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style"> 
 </head> 
 <body style="margin: 0; overflow: hidden"> 
 <d:View config="TableEvents"> 
 <d:SplitPanel id="sp1" orientation="horizontal" position="50%" width="100%" height="100%" showButtons="true"> 
 <d:SubWindow 
 id="subwindow1" 
 title="事件定义窗口" 
 width="100%" 
 height="100%" 
 draggable="false" 
 resizable="false" 
 status="normal" 
 showMinimizeButton="false" 
 showMaximizeButton="true" 
 showCloseButton="false"> 
 <d:OutlookBar id="outlookBar1" width="100%" height="100%"> 
 <d:OutlookBarGroup name="group1"> 
 <d:Layout type="border"> 
 <d:Pane position="top" height="145px"> 
 <d:DataTable id="tableEvents"/> 
 </d:Pane> 
 <d:Pane position="center"> 
 <d:TabSet id="tabset1"> 
 <d:Tab name="tab1" label="事件说明" padding="8"> 
 <d:DataLabel id="datalabelRemark"/> 
 </d:Tab> 
 <d:Tab name="tab2" label="事件代码"> 
 <d:AutoForm id="formEvents"/> 
 </d:Tab> 
 <d:Tab name="tab3" label="事件范例" padding="4"> 
 <p class="hint" style="width: 100%; height: 100%"> 
 <d:DataLabel id="datalabelSample"/> 
 </p> 
 </d:Tab> 
 </d:TabSet> 
 </d:Pane> 
 </d:Layout> 
 </d:OutlookBarGroup> 
 <d:OutlookBarGroup name="group2"> 
 <d:Layout type="border"> 
 <d:Pane position="center"> 
 <d:SplitPanel id="sp2" orientation="horizontal" position="100" width="100%" height="100%" showButtons="true"> 
 <d:DataTable id="tableColumns"/> 
 <d:Splitter/> 
 <d:DataTable id="tableColumnEvents"/> 
 </d:SplitPanel> 
 </d:Pane> 
 <d:Pane position="bottom" height="290px"> 
 <d:TabSet id="tabset2"> 
 <d:Tab name="tab1" label="事件范例" padding="4"> 
 <p class="hint" style="width: 100%; height: 100%;padding:20px"> 
 <d:DataLabel id="datalabelColumnSample"/> 
 </p> 
 </d:Tab> 
 <d:Tab name="tab2" label="事件代码"> 
 <d:AutoForm id="formColumnEvents"/> 
 </d:Tab> 
 </d:TabSet> 
 </d:Pane> 
 </d:Layout> 
 </d:OutlookBarGroup> 
 </d:OutlookBar> 
 </d:SubWindow> 
 <d:Splitter/> 
 <d:SubWindow 
 id="subwindow2" 
 title="预览窗口" 
 width="100%" 
 height="100%" 
 draggable="false" 
 resizable="false" 
 status="normal" 
 showMinimizeButton="false" 
 showMaximizeButton="true" 
 showCloseButton="false"> 
 <d:DataTable id="tableEmployee"/> 
 </d:SubWindow> 
 </d:SplitPanel> 
 </d:View> 
 </body> 
 </html>

查看运行效果

启动服务器后，查看table-events.jsp，效果如下：

可以对事件进行查看，也可以对事件进行重写。

知识点

本示例知识点主要是DataTable的事件，关于DataTable可以参考《dorado 5组件详解 v1.1》的第二部分的D部分的第一节。

Attachments:

worddav660454b59a538bfa9cb7d9d383f7ce86.png (image/png)
worddav96ce751f20a3f0b73a16cabfa4ec6b7d.png (image/png)