`

Dorado中DataTable使用技巧汇总

 
阅读更多

Dorado中DataTable使用技巧汇总

subwindow加滚动条

<div style="overflow-y: scroll; height: 95%"></div>


有些参数在View里面使用,从后台放在url里面穿到前台的时候在前台需要用,可以通过如下代码接受,然后在View里面就可以用了。
Js代码 
<script type="text/javascript"> 
      var flowProjectId = <%=request.getParameter("flowProjectId")%>; 
      var quarterId = <%=request.getParameter("quarterId")%>; 
      var proceedId = <%=request.getParameter("proceedId")%>; 
         var flowTaskId = <%=request.getParameter("flowTaskId")%>; 
      var flowCaseId = <%=request.getParameter("flowCaseId")%>; 
       var id = <%=request.getParameter("id")%>; 
      <%String aaa=request.getParameter("transitions"); 
       if(aaa!=null&&!aaa.equals("")) 
       { aaa=new String(aaa.getBytes("ISO-8859-1"),"UTF-8");}%> 
      var transitions = <%=aaa%>; 
      </script> 



赵国成 发布于 11个月前,共有 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 onclick=\"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时:表格不可编辑,也无法新增和删除记录;


分享到:
评论

相关推荐

    DORADO组件使用技巧.pdf

    ### DORADO组件使用技巧详解 #### 一、概述 DORADO是BSTEK公司推出的一款专注于企业级应用开发的框架,特别适用于构建复杂的Web应用程序。其核心优势在于丰富的组件库,这些组件不仅覆盖了基本的UI元素,还提供了...

    dorado5组件使用详解

    【Dorado 5组件使用详解】 Dorado 5是一款由金蝶国际软件集团开发的富客户端框架,主要用于构建企业级的Web应用。该框架提供了一系列丰富的UI组件,以提高用户体验和开发效率。以下是对Dorado 5中部分关键组件的...

    dorado常用技巧

    Dorado是一款功能强大且灵活的开发平台,它提供了许多实用的技巧和功能,以下是Dorado中的一些常用技巧汇总,希望对大家有用。 1. 调试技巧 在Dorado中,可以使用CTRL+SHIFT+ALT+F12键来调试和评估JS代码,并计时...

    Dorado7/9开发环境 (解压即用Eclipse+dorado插件)支持dorado7和dorado9

    标题中的"Dorado7/9开发环境 (解压即用Eclipse+dorado插件)支持dorado7和dorado9"表明这是一个专为Dorado7和Dorado9开发设计的集成开发环境(IDE)。这个环境基于Eclipse,一个广泛使用的开源Java IDE,它已经被扩展...

    dorado7离线中文文档.7z

    【标题】"dorado7离线中文文档.7z" 提供的是 Dorado7 开发的重要参考资料,它是一份详尽的 Dorado7.5 官方离线文档,适用于那些在开发过程中需要离线查阅 Dorado 框架相关知识的开发者。Dorado 是一个功能强大的富...

    Dorado Marmot使用简介

    ### Dorado Marmot 使用简介 #### 产品定位与功能 Dorado Marmot作为一款与Spring框架无缝集成的开源组件,在Dorado平台内被设计为一种新型的Dataset类型。其核心价值在于提供数据加载与数据提交接口,使得开发者...

    Dorado技巧

    对于Dorado总结的一些技巧,利用Xmind制成思维导图展示出来

    Dorado API中文

    在实际开发过程中,应仔细阅读每个API的描述,了解其适用场景和限制条件,同时参考示例代码进行实践,以便更好地掌握Dorado API的使用。通过不断的学习和实践,开发者可以构建出高效、稳定的存储解决方案,满足企业...

    在dorado中的Excel报表

    在 Dorado 中,Excel 报表功能是一个重要组成部分,旨在满足用户对数据导出和打印的需求,特别是那些希望通过 Excel 电子表格来处理和分析数据的用户。Dorado 的 Excel 报表功能在设计时考虑了轻量级的特性,使得它...

    dorado marmot使用简介

    根据给定文件的信息,我们...以上内容总结了 **Dorado Marmot** 的核心功能以及如何在实际项目中使用它来进行数据加载和提交操作。通过这些知识点的学习,开发者可以更好地理解和掌握 **Dorado Marmot** 的使用方法。

    灵活使用dorado_5

    - **EventManager 的使用**:`EventManager` 是 Dorado 中用于处理事件的关键组件,可以监听和响应用户交互,如编辑、保存等事件。 - **DataTable 的 footer 用法**:`DataTable` 的底部区域(footer)可以用来...

    dorado5学习资料

    通过阅读"05 技术手册",用户可以全面了解DORADO5的使用方法和最佳实践,从而充分发挥该软件在企业信息化建设中的作用。不断学习和掌握这些知识,对于提升企业的数据处理能力和决策效率具有重要意义。

    dorado开发框架 baseProject

    使用 baseProject 开始开发时,开发者只需根据自己的业务需求创建新的 Service、DAO、Action 及对应的 Model,然后在配置文件中进行相应的扩展,即可快速构建出完整的应用程序。同时,Dorado 框架还提供了丰富的组件...

    dorado5组件使用详解+2006-10-08.doc

    ### Dorado5组件使用详解 #### 一、DataTable(数据表格) **1. 如何设定表格中行的高度(包括表格头,合计栏)** - `headerHeight`:用于设定表格头部的高度,通常用来确保表头有足够的空间来清晰展示列名或相关的...

    Dorado7.x快速入门详解

    ### Dorado7.x快速入门详解 ...总之,Dorado7.x快速入门详解不仅涵盖了从环境配置到基础功能使用的方方面面,还深入探讨了高级特性与技巧,为开发者提供了一条从新手到熟练掌握Dorado开发的清晰路径。

    dorado7-eclipse研发工具

    为了在Eclipse中有效地开发Dorado7应用,你需要安装对应的Dorado7插件,这通常在`dorado7资源在eclipse中`目录下可以找到,它会指导你如何配置Eclipse以支持Dorado7的开发,包括项目模板、编码辅助、调试工具等。...

    dorado入门指南经典教程

    * Dorado Studio:了解Dorado Studio的功能和使用方法,掌握Dorado Studio的配置和使用。 * Eclipse插件:了解Eclipse插件的功能和使用方法,掌握Eclipse插件的配置和使用。 八、Dorado版本更新 * Dorado 5:了解...

    dorado7-ide-0.7.2.zip

    此外,IDE还提供了智能提示和自动补全功能,对于Dorado7的API和函数调用,能够实现快速定位和使用,降低了学习曲线,提升了开发速度。 其次,Dorado7 IDE的项目管理功能也是其亮点之一。它支持多项目同时管理,可以...

    dorado-hibernate和dorado-core的jar包

    在实际项目中,Dorado-hibernate和Dorado-core的结合使用,使得开发者可以利用Dorado的强大功能和Hibernate的ORM优势,构建出高效、可维护的企业级应用。由于你提到网上可能难以找到这两个jar包,这可能意味着这些...

Global site tag (gtag.js) - Google Analytics