DataTable(数据表格)使用技巧汇总

  1.如何设定表格中行的高度(包括表格头，合计栏)
headerHeight：设定表格头的高度；
footerHeight：设定表格合计栏的高度；
rowHeidht：设定数据行的高度；

dorado-5.0 060904.1658以后的版本支持

2.如何添加动态列(包含自定义的按钮或者自定义的超链接)
Table中直接添加一个column,不需要设定field属性，如name为operation
范例1：
实现效果:表格列中包含一个按钮，功能:单击查看详细
实现方法：
在该列的onRefresh事件中写入代码
var id = record.getValue("id"); //通过表格当前单元框所属的record对象获取主键信息。
var html = "<button οnclick=\"showDetail('"+id+"');\" style=\"border-width:1px\">详细</button>" ;
cell.innerHTML = html;

在视图模型的<<functions>>中添加
function showDetail(id){
open("打开详细信息显示页面的url?id="+id);
}

范例2：
表格列中包含一个超级链接，功能:单击查看详细
实现方法：
在该列的onRefresh事件中写入代码
var id = record.getValue("id"); //通过表格当前单元框所属的record对象获取主键信息。
var html = "<a href=\"打开详细信息显示页面的url?id="+id+"\">详细</a>" ;
cell.innerHTML = html;

3.如何在表格的双击事件中打开详细信息页面，如detail.jsp，并传入表格中当前行的某几列信 息
实现表格的onRecordDBClick事件，写入代码：
open("detail.jsp?param1="+dataset.getValue("field1")+"&param2="+dataset.getValue("field2"));
以上代码需要注意的是，我们提交给detail.jsp页面的参数是通过dataset获取而不是直接从表格中的列获取，这是由于DataTable提供了绑定功能的机制，当我们选中了表格的某一行双击选择时，dataset已经自动的定位到当前行所在的dataset的record对象上，我们通过 dataset.getValue()就是获得表格当前选择行所属的record对象的getValue()方法。

4.如何在页面打开时，自动锁定表格中的指定的两列信息
设定表格的fixedColumn为2，并在Studio设计器中调整自己需要的两个列到DataTable的最前面，如下的配置：
<Control id="tableEmployee" type="DataTable" dataset="datasetEmployee" showDefinedColsOnly="true" width="100%" highlightSelection="false" height="400" fixedColumn="2">
<Column name="married" field="married" sortable="true" rendererType="checkbox" width="40" />
<Column name="employee_name" field="employee_name" sortable="true" width="150" />
<Column name="sex" field="sex" sortable="true" dropDown="dropdownSex" align="center" width="70" editorType="radiogroup" />
<Column name="birthday" field="birthday" sortable="true" width="110" />
<Column name="salary" field="salary" sortable="true" width="150" />
<Column name="web" field="web" sortable="true" readOnly="true" width="160" />
<Column name="operation" label="操作" align="center" readOnly="true" width="180" />
</Control>
就表示当前表格锁定的列为married和employee_name.

5.如何隐藏表格中指定列
虽然表格中的列提供了visible属性，如果我们将它设定为false该列将自动隐藏。
我们建议的最好方式是直接删除视图模型中DataTable中的该列

6.如何在客户端动态的隐藏或则添加表格中指定的列
方法一:
DataTable提供了removeColumn方法用于动态删除列，实现代码如下：
table1.removeColumn("这里填入你想要隐藏的列的name");
table1.refresh();//刷新表格，使新的设定生效
方法二：
DataTable提供getColumn方法获得表格中指定列对象。
var column = table1.getColumn("employee_name");
column.setVisible(false); //设定该列对象的visible属性为false,用以隐藏该列
table1.refresh();//刷新表格，使新的设定生效
方法三：
利用DataTable的addColumn属性动态的添加列
var column = table1.addColumn("employee_name");
column.setField("employee_name");//设定该列绑定到记录集合的employee_name字段
table1.setColumnIndex(column,0);//设定该列在表格中的位置
table1.refresh();//刷新表格，使新的设定生效

7.如何在表格中显示图片
DataTable中的每一个表格框在初始化的以及数据更新的时候都会触发表格中column对象的onRefresh事件，由该事件负责向表格中的 cell中写入显示的信息，利用这个机制。我们可以在表格中需要显示图片的column中的onRefresh事件中加入如下的代码：
cell.innerHTML = "<img src='指定你要显示的图片的资源路径'>";
如：
cell.innerHTML = "<img src='images/man.gif'>";
当然了，很多情况下我们的图片是储存到文件服务器或则数据库中，而不是上面例子中图片存储到war包下。
那么我们就可以修改src的url路径为一个servlet,并且传入表格中当前记录的其它字段信息，以便后台根据关键字获得正确的图片文件。如：
cell.innerHTML = "<img src='photodownload?employeeId="+record.getValue("employee_id")+"'>";
随后我们可以在服务器端新增一个servlet对象。
web.xml中配置为：
<servlet>
<servlet-name>photodownload</servlet-name>
<servlet-class>sample.control.Photodownload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>photodownload</servlet-name>
<url-pattern>/photodownload</url-pattern>
</servlet-mapping>
Servlet的定义为
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String employeeId = request.getParameter("employeeId");
InputStream in = getDownloadFileInputStream(employeeId); //根据employeeId获取要输出文件的文件流对象
if (in != null) {
OutputStream out = response.getOutputStream();
try {
byte[] buffer = new byte[2048];
int len = in.read(buffer);
while (len != -1) {
out.write(buffer, 0, len);
len = in.read(buffer);
}
out.flush();
}
catch (Exception ex) {
/** @todo
* to avoid "java.net.SocketException: Connection reset by peer: socket write error"
*/
}
finally {
in.close();
out.close();
}
}

其中getDownloadFileInputStream是需要开发人员自定义的函数，主要功能是通过employeeId获取一个文件流对象，开发人员可根据具体业务需求决定从文件服务器获得文件还是数据库获得文件。
以下摘抄一段oracle获取数据库文件流的代码：
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String employeeId = request.getParameter("employeeId");
Connection con = getConnection();//获取connection
con.setAutoCommit(false);
Statement st = con.createStatement();
ResultSet rs = st.executeQuery(
"select fileName, contents from BLOBIMG where id='" + employeeId + "' ");

if (rs.next()) {
String fileName = rs.getString("fileName");
oracle.sql.BLOB blob = (oracle.sql.BLOB)rs.getBlob(1);
InputStream ins = blob.getBinaryStream();
response.setContentType("application/unknown");
response.addHeader("Content-Disposition",
"attachment; filename=" + fileName);
OutputStream outStream = response.getOutputStream();
byte[] bytes = new byte[1024];
int len = 0;
while ( (len = ins.read(bytes)) != -1) {
outStream.write(bytes, 0, len);
}
ins.close();
outStream.close();
outStream = null;
con.commit();
con.close();
}
}


8.如何使用表格的汇总行
a.视图模型中设定表格的showFooter属性为true;
b.设定表格绑定的数据集中需要作汇总的字段的supportsSum为true;

根据这个设置，dataset会自动的计算该字段的和，并显示在表格的统计列中。通过该种方式设置的统计值会自动根据表格中统计字段的值变化而重新统计和。并刷新；

后记：
合计列数值的格式化定义：
实现column的onFooterRefresh事件,代码如：
cell.innerHTML="<font color='red'>"+value+"</font>";//value为数据集的统计值，datatable调用该事件时，会先自动计算出这个合计值。
return false;

合计数值之前的一列显示一个汇总项说明：
设置合计列之前的一列（Column）的footValue属性(在xml中直接指定最为简洁)

9.如何自定义表格的CSS风格
默认情况下DataTable的CSS风格是通过doradohome资源目录下（dorado项目中对应的是home）\smartweb\v2\skins\default\skin.css
主要属性有：
/*数据表格*/
.DataTable {
background-color: #F5F7F9;
}
/*数据头*/
.DataTable .HeaderGrid {
color: #405368;
border-width: 1;
border-color: #C5D9E8;
border-style: solid;
border-collapse: collapse;
table-layout: fixed;
}
/*数据头激活单元格*/
.DataTable .HeaderGrid .HotCell {
background-position-y: 100%;
background-image: url(${SkinRoot}/datatable_header_hot.gif);
}
/*统计栏*/
.DataTable .FooterGrid {
background-color: #E1EAF1;
border-width: 1;
border-color: #C5D9E8;
border-style: solid;
border-collapse: collapse;
table-layout: fixed;
}
/*锁定列的数据表格体*/
.DataTable .FixedDataGrid {
background-color: #EDF2F6;
border-width: 1;
border-color: #C5D9E8;
border-style: solid;
border-collapse: collapse;
table-layout: fixed;
}
/*锁定列的数据表格体的行指示器*/
.DataTable .FixedDataGrid .Indicator {
background-color: #E6EDF2;
}
/*锁定列数据表格体的数据行*/
.DataTable .FixedDataGrid .Row {
}

/*数据表格体*/
.DataTable .DataGrid {
background-color: #F5F7F9;
border-width: 1;
border-color: #C5D9E8;
border-style: solid;
border-collapse: collapse;
}
/*数据表格体的数据行*/
.DataTable .DataGrid .Row {
}
/*数据表格体的当前激活行*/
.DataTable .DataGrid .CurrentRow {
background-color: #B7F39B;
}
通过修改这些css配置，我们就可以修改表格的默认风格。

10.如何设定表格列的只读属性
a.(推荐)设定表格列绑定的field的readOnly
b.设定column本身的readOnly属性

11.如何动态设定表格行/列的只读特性
表格中希望根据表格中某一列的数据动态决定该行是否可编辑。
在dataset的afterScroll方法中添加代码：
var flag = dataset.getValue("flag");//获取用于判断的关键字段的值
if (flag==true)
datasetEmployee.setReadOnly(true);//设定dataset的状态为不可编辑
else
datasetEmployee.setReadOnly(false);//设定dataset的状态为可编辑

使用技巧说明：
该处会让所有初次使用的人感到迷惑不解

a.为什么不是设定表格中的数据而是设定dataset的readOnly？
datatable说：很抱歉，我的信息都是dataset管理的。同样状态也由dataset管理。

b.为什么是设定整个dataset的只读属性而不是设定某一个record的只读属性？
dataset说：很是抱歉，虽然我有record对象，但是我的record对象不支持只读属性的设定。

这样我们所有的重担都落到dataset上了，兴好dataset找到它的cursor兄弟。cursor说：反正页面上所有元素显示的值都是由我决定的。当dataset的readOnly为true时,这些元素也不可编辑，所以你直接在我(cussor)进行定位时设定dataset的只读状态设定。于是dataset通过afterScroll方法进行只读状态的设定。

后传：
有人提出新的要求，动态根据字段的值决定某些其它字段的只读属性：
datasetEmployee.setFieldReadOnly("要设定字段的name",true/false);
tableEmployee.getColumn("dept_id").setReadOnly(true/false);
他们都支持动态设定。

 12.如何设定表格让它变为不可编辑
a.(推荐)设定表格绑定数据集的readOnly属性,这种设定方法能使所有绑定到该数据集的的组件处于不可编辑状态;
b.设定表格本身的readOnly属性;

13.如何单击表格列中，出现一个下拉选择界面
设定表格列绑定的field的dropDown属性，绑定到本视图模型定义好的dropdown对象。

14.如何禁止table中单击表格列头，表格中数据自动排序的功能
该功能为dataTable默认集成的功能，如果想禁止，设定表格column的sortable为false

15.Column中editorType与rendererType的区别
editorType是在激活单元格做编辑时才起作用；
redererType为数据渲染器，用于以设定的渲染方式显示表格单元格的数据；

16.readOnly与editable的区别
editable为true时:表格不可编辑,但可以新增和删除记录;
readOnly为true时:表格不可编辑,也无法新增和删除记录;