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

迈不过友情╰ 2022-06-18 01:10 1331阅读 0赞

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时:表格不可编辑,也无法新增和删除记录。