概述

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

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

准备工作

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

开发步骤

添加Dataset

步骤1：添加一Common ViewModel，文件名为TableCss。
步骤2：添加一CustomDataset，id设置为datasetCss。
为datasetCss添加6个字段，属性设置如下：

dataType	label	name	readOnly
		index	true
		id	true
string	CSS名称	key	true
string	CSS标题	label	true
string	[在这里填入你自定义的css设定]	value
	sample范例	sample	true

为datasetCss添加一Parameter，属性设置如下：

属性	值
dataType	string
name	eventSet
value	Table

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

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import com.bstek.dorado.common.DoradoContext;
import com.bstek.dorado.common.HttpDoradoContext;
import com.bstek.dorado.common.Setting;
import com.bstek.dorado.data.AbstractDatasetListener;
import com.bstek.dorado.data.Dataset;
import com.bstek.dorado.data.Record;
import com.bstek.dorado.data.RecordIterator;
import com.bstek.dorado.utils.StringHelper;
/**
 * Main_datasetCssListener
 */
public class CssListener extends AbstractDatasetListener {
    private Map initStaticCSSMap() {
        Map map = new HashMap();
        String skin = Setting.getString("view.smartweb2.skin", "default");
        HttpDoradoContext context = (HttpDoradoContext) DoradoContext
                .getContext();
        String contextPath = context.getRequest().getContextPath();
        String SKIN_ROOT = contextPath
                + "/dorado/smartweb2.loadStyleSheet.d?skin=" + skin;
        List list = null;
        StringBuffer css = new StringBuffer("");
        // 表格头
        list = new ArrayList();
        list.add(".DataTable .HeaderGrid");
        list.add("表格头");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("color: #405368;\n");
        css.append("border-width: 1;/*边框的宽度*/\n");
        css.append("border-color: #C5D9E8;/*边框的颜色*/\n");
        css
                .append("border-style: solid;/*边框的风格,可选值有:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset*/\n");
        css
                .append("border-collapse: collapse;/*边框是否具有三维效果.可选择值有:separate,collapse*/\n");
        css
                .append("table-layout: fixed;/*表格的宽度是否根据内容自动适应，如果fixed则锁定宽度，可选值有auto,fixed*/");
        list.add(css.toString());
        map.put("HeaderGrid", list);
        // 表格头激活单元格(鼠标的moveover事件)
        list = new ArrayList();
        list.add(".DataTable .HeaderGrid .HotCell");
        list.add("表格头激活单元格(鼠标的moveover事件)");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-position-y: 100%;/*背景图片高度在单元框中的高度*/\n");
        css.append("background-image: url(" + SKIN_ROOT
                + "/datatable_header_hot.gif);/*背景图片*/");
        list.add(css.toString());
        map.put("HeaderGrid.HotCell", list);
        // 统计栏Grid
        list = new ArrayList();
        list.add(".DataTable .FooterGrid");
        list.add("统计栏Grid");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-color: #E1EAF1;/*背景色*/\n");
        css.append("border-width: 1;/*边框的宽度*/\n");
        css.append("border-color: #C5D9E8;/*边框的颜色*/\n");
        css
                .append("border-style: solid;/*边框的风格,可选值有:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset*/\n");
        css.append("border-collapse: collapse;/*可选择值有:separate,collapse*/\n");
        css
                .append("table-layout: fixed;/*表格的宽度是否根据内容自动适应，如果fixed则锁定宽度，可选值有auto,fixed*/");
        list.add(css.toString());
        map.put("FooterGrid", list);
        // 锁定列所在的表格数据Grid
        list = new ArrayList();
        list.add(".DataTable .FixedDataGrid");
        list.add("锁定列所在的表格数据Grid");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-color: #EDF2F6;/*背景色*/\n");
        css.append("border-width: 1;/*边框的宽度*/\n");
        css.append("border-color: #C5D9E8;/*边框的颜色*/\n");
        css
                .append("border-style: solid;/*边框的风格,可选值有:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset*/\n");
        css.append("border-collapse: collapse;/*可选择值有:separate,collapse*/\n");
        css
                .append("table-layout: fixed;/*表格的宽度是否根据内容自动适应，如果fixed则锁定宽度，可选值有auto,fixed*/");
        list.add(css.toString());
        map.put("FixedDataGrid", list);
        // 锁定列所在的表格数据Grid的行指示器
        list = new ArrayList();
        list.add(".DataTable .FixedDataGrid .Indicator");
        list.add("锁定列表格的行指示器");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-color: #E6EDF2;/*背景色*/");
        list.add(css.toString());
        map.put("FixedDataGrid.Indicator", list);
        // 锁定列所在的表格数据Grid的表格行
        list = new ArrayList();
        list.add(".DataTable .FixedDataGrid .Row");
        list.add("锁定列表格行");
        list.add(null); // value
        list.add(null);
        map.put("FixedDataGrid.Row", list);
        // 锁定列所在的表格数据Grid的虚拟行
        list = new ArrayList();
        list.add(".DataTable .FixedDataGrid .MockRow");
        list.add("锁定列表格虚拟行");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-color: #F0F0F0;/*背景色*/");
        list.add(css.toString());
        map.put("FixedDataGrid.MockRow", list);
        // 锁定列所在的表格数据Grid的当前激活行
        list = new ArrayList();
        list.add(".DataTable .FixedDataGrid .CurrentRow");
        list.add("锁定列表格当前激活行");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-color: #B7F39B;/*背景色*/");
        list.add(css.toString());
        map.put("FixedDataGrid.CurrentRow", list);
        // 表格数据Grid
        list = new ArrayList();
        list.add(".DataTable .DataGrid");
        list.add("表格数据Grid");
        list.add(null); // value
        css = new StringBuffer("");
        css.append("background-color: #F5F7F9;/*背景色*/\n");
        css.append("border-width: 1;/*边框的宽度*/\n");
        css.append("border-color: #C5D9E8;/*边框的颜色*/\n");
        css
                .append("border-style: solid;/*边框的风格,可选值有:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset*/\n");
        css.append("border-collapse: collapse;/*可选择值有:separate,collapse*/\n");
        list.add(css.toString());
        map.put("DataGrid", list);
        // 表格行
        list = new ArrayList();
        list.add(".DataTable .DataGrid .Row");
        list.add("表格行");
        list.add(null); // value
        list.add(null);
        map.put("DataGrid.Row", list);
        // 虚拟行
        list = new ArrayList();
        list.add(".DataTable .DataGrid .MockRow");
        list.add("表格虚拟行");
        list.add(null); // value
        css = new StringBuffer("");
        css.append(" background-color: #F0F0F0;/*背景色*/");
        list.add(css.toString());
        map.put("DataGrid.MockRow", list);
        // 表格激活行
        list = new ArrayList();
        list.add(".DataTable .DataGrid .CurrentRow");
        list.add("表格激活行");
        list.add(null); // value
        css = new StringBuffer("");
        css.append(" background-color: #B7F39B;/*背景色*/");
        list.add(css.toString());
        map.put("DataGrid.CurrentRow", list);
        return map;
    }
    public void afterLoadData(Dataset dataset) throws Exception {
        String eventSet = dataset.parameters().getString("eventSet");
        Map map = getSessionCSS(eventSet);
        int index = 0;
        Iterator iter = map.keySet().iterator();
        while (iter.hasNext()) {
            String cssName = (String) iter.next();
            List list = (List) map.get(cssName);
            dataset.insertRecord();
            dataset.setInt("index", ++index);
            dataset.setString("id", cssName);
            dataset.setString("key", (String) list.get(0));
            dataset.setString("label", (String) list.get(1));
            dataset.setString("value", (String) list.get(2));
            dataset.setString("sample", (String) list.get(3));
        }
    }
    public boolean beforeUpdateData(Dataset dataset) throws Exception {
        String eventSet = dataset.parameters().getString("eventSet");
        Map map = getSessionCSS(eventSet);
        RecordIterator ri = dataset.recordIterator();
        ri.setVisibility(Dataset.FILTER_CHANGED);
        while (ri.hasNext()) {
            Record record = ri.nextRecord();
            String id = record.getString("id");
            String value = record.getString("value");
            List list = (List) map.get(id);
            if (StringHelper.isNotEmpty(value)) {
                list.set(2, value);
            } else {
                list.set(2, null);
            }
        }
        DoradoContext context = DoradoContext.getContext();
        if (map.size() > 0) {
            context.setAttribute(DoradoContext.SESSION, eventSet + ".CSS", map);
        }
        return true;
    }
    private Map getSessionCSS(String eventSet) {
        DoradoContext context = DoradoContext.getContext();
        Object o = context.getAttribute(DoradoContext.SESSION, eventSet
                + ".CSS");
        if (o != null && o instanceof Map) {
            return (Map) o;
        } else {
            return initStaticCSSMap();
        }
    }
}

添加CSS编辑窗口部分

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

属性	值
dataset	datasetCss
height	100%
id	tableCss
showHScrollBar	false
showIndicator	false
width	100%

选中tableCss，点击字段生成按钮，删除无用字段，最后只保留index和label字段。
为tableCss的label字段的onRefresh字段添加如下代码：

cell.innerHTML = record.getString("label") + "(" + record.getString("key")+")"; 
return false;

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

属性	值
alwaysPerform	true
id	commandUpdateCss

为commandUpdateCss的onSuccess事件添加如下代码：

 open("data-table.jsp","cssView");

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

属性	值
commond	commandUpdateCss
id	buttonAppendCss
value	添加并预览

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

属性	值
dataset	datasetCss
field	sample
id	datalabelSample

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

属性	值
dataset	datasetCss
field	key
id	datalabelKey

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

属性	值
id	splitpanel1
orientation	vertical

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

属性	值
dataset	datasetCss
id	formCss

为datasetCss添加一Form Group，设置其columnCount为1。然后为datasetCss添加一TextEditor Element，属性设置如下：

属性	值
field	value
name	value
showLabel	false

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

属性	值
editorType	textarea
height	100

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

属性	值
controlAlign	right
controlId	buttonAppendCss
name	element1
showLabel	false

添加预览窗口部分

步骤1：添加一Common ViewModel，文件名为DataTable。
步骤2：添加一Simple Class，类名为CssOutputter，代码如下：

import java.util.Iterator;
import java.util.List;
import java.util.Map;
import com.bstek.dorado.common.DoradoContext;
import com.bstek.dorado.utils.StringHelper;
public class CssOutputter {
    public static String getCssString(String eventSet) {
        StringBuffer sb = new StringBuffer("");
        DoradoContext context = DoradoContext.getContext();
        Map map = (Map) context.getAttribute(DoradoContext.SESSION, eventSet
                + ".CSS");
        if (map != null) {
            Iterator iter = map.keySet().iterator();
            while (iter.hasNext()) {
                String id = (String) iter.next();
                List list = (List) map.get(id);
                String key = (String) list.get(0);
                String value = (String) list.get(2);
                if (StringHelper.isNotEmpty(value)) {
                    sb.append(key + " {");
                    sb.append(value);
                    sb.append(" }");
                }
            }
        }
        String cssString = sb.toString();
        return "<style>" + cssString + "</style>";
    }
}

步骤3：添加一AutoSqlDataset，选中Employee表格，选择除了image中的所有字段。该AutoSqlDataset属性设置如下：

属性	值
autoLoadPage	true
id	datasetEmployee
originTable	EMPLOYEE
pageSize	15

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

属性	值
dataset	datasetEmployee
fixedColumn	1
height	100%
id	tableEmployee
showFooter	true
width	100%

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

属性	值
autoDropDown	true
id	dropdownSex
mapValue	true

为dropdownSex添加两个DropDownItem。第一个DropDownItem的name设置为"男"，value设置为true。第二个DropDownItem的name设置为"女"，value设置为false。
设置datasetEmployee的sex字段的dropdown为dropdownSex。

创建Jsp页面

为TableCss生成Jsp并进行编辑，结果如下：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title>表格皮肤设置</title> 
 </head> 
 <body scroll="no" margin="0"> 
 <d:View config="sample.skills.table.test.TableCss"> 
 <d:SplitPanel id="sp1" orientation="horizontal" position="50%" width="100%" height="100%" showButtons="true"> 
 <d:SubWindow 
 id="subwindow1" 
 title="CSS编辑窗口" 
 width="100%" 
 height="100%" 
 draggable="false" 
 resizable="false" 
 status="normal" 
 showMinimizeButton="false" 
 showMaximizeButton="true" 
 showCloseButton="false"> 
 <d:SplitPanel id="sp2" orientation="vertical" position="60%" width="100%" height="100%" showButtons="true"> 
 <d:DataTable id="tableCss"/> 
 <d:Splitter/> 
 <d:TabSet id="tabset1" currentTab="tab2"> 
 <d:Tab name="tab1" label="自定义CSS"> 
 <d:AutoForm id="formCss"/> 
 </d:Tab> 
 <d:Tab name="tab2" label="参考代码" padding="4"> 
 <p class="hint" style="width: 100%; height: 100%"> 
 <d:DataLabel id="datalabelSample"/> 
 </p> 
 </d:Tab> 
 </d:TabSet> 
 </d:SplitPanel> 
 </d:SubWindow> 
 <d:Splitter/> 
 <d:SubWindow 
 id="subwindow3" 
 title="预览窗口" 
 width="100%" 
 height="100%" 
 draggable="false" 
 resizable="false" 
 status="normal" 
 showMinimizeButton="false" 
 showMaximizeButton="true" 
 showCloseButton="false"> 

 <iframe name="cssView" src="data-table.jsp" frameborder="0" 
marginWidth="0" style="width:100%; height:100%"> </iframe> 
 </d:SubWindow> 
 </d:SplitPanel> 
 </d:View> 
 </body> 
 </html>

为DataTable生成Jsp页面，并进行编辑，结果如下：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body style="margin: 0; overflow: hidden"> 
 <d:View config="DataTable"> 
 <% 
 out.println(CssOutputter.getCssString("Table")); 
 %> 
 <d:DataTable id="tableEmployee" /> 
 </d:View> 
 </body> 
 </html>

查看运行效果

启动浏览器，并浏览talbe-css.jsp，效果如下：

可以在左侧对Css进行更新，在右侧看更改Css后的效果。

知识点

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

Dorado 5 : 5.6.表格功能测试-CSS测试 (T22)

概述