[开发技巧]DataTable(数据表格)使用技巧汇总.doc

开发技巧 DataTable(数据表格)使用技巧汇总hotbarsmu 2008-09-20 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 = 详细 ;cell.innerHTML = html;在视图模型的中添加function showDetail(id)open(打开详细信息显示页面的url?id=+id);范例2：表格列中包含一个超级链接，功能:单击查看详细实现方法：在该列的onRefresh事件中写入代码var id = record.getValue(id); /通过表格当前单元框所属的record对象获取主键信息。var html = 详细 ;cell.innerHTML = html;3.如何在表格的双击事件中打开详细信息页面，如detail.jsp，并传入表格中当前行的某几列信 息实现表格的onRecordDBClick事件，写入代码：open(detail.jsp?param1=+dataset.getValue(field1)+¶m2=+dataset.getValue(field2);以上代码需要注意的是，我们提交给detail.jsp页面的参数是通过dataset获取而不是直接从表格中的列获取，这是由于DataTable提供了绑定功能的机制，当我们选中了表格的某一行双击选择时，dataset已经自动的定位到当前行所在的dataset的record对象上，我们通过 dataset.getValue()就是获得表格当前选择行所属的record对象的getValue()方法。4.如何在页面打开时，自动锁定表格中的指定的两列信息 设定表格的fixedColumn为2，并在Studio设计器中调整自己需要的两个列到DataTable的最前面，如下的配置：就表示当前表格锁定的列为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 = ;如：cell.innerHTML = ;当然了，很多情况下我们的图片是储存到文件服务器或则数据库中，而不是上面例子中图片存储到war包下。那么我们就可以修改src的url路径为一个servlet,并且传入表格中当前记录的其它字段信息，以便后台根据关键字获得正确的图片文件。如：cell.innerHTML = ;随后我们可以在服务器端新增一个servlet对象。web.xml中配置为：photodownloadsample.control.Photodownloadphotodownload/photodownloadServlet的定义为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 byte2048;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 .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();/获取connectioncon.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 byte1024;int len = 0;while ( (len = ins.read(bytes) != -1) outStream.write(bytes, 0, len);ins.close();outStream.close();outStream = null;mit();con.close();8.如何使用表格的汇总行 a.视图模型中设定表格的showFooter属性为true;b.设定表格绑定的数据集中需要作汇总的字段的supportsSum为true;根据这个设置，dataset会自动的计算该字段的和，并显示在表格的统计列中。通过该种方式设置的统计值会自动根据表格中统计字段的值变化而重新统计和。并刷新；后记：合计列数值的格式化定义：实现column的onFooterRefresh事件,代码如：cell.innerHTML=+value+;/value为数据集的统计值，datatable调用该事件时，会先自动计算出这个合计值。return false;合计数值之前的一列显示一个汇总项说明：设置合计列之前的一列（Column）的footValue属性(在xml中直接指定最为简洁)9.如何自定义表格的CSS风格 默认情况下DataTable的CSS风格是通过doradohome资源目录下（dorado项目中对应的是home）smartwebv2skinsdefaultskin.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的readOnlyb.设定column本身的readOnly属性11.如何动态设定表格行/列的只读特性 表格中希望根据表格中某一列的数据动态决定该行是否可编辑。在dataset的afterScroll方法中添加代码：var flag = dataset.getValue(flag);/获取用于判断的关键字段的值if (flag=true)datasetEmployee.setReadOnly(true);/设定dataset的状态为不可编辑elsedatasetEmployee.setReadOnly(false);/设定dataset的状态为可编辑使用技巧说明：该处会让所有初次使用的人感到迷惑不解a.为什么不是设定表格中的数据而是设定dataset的readOnly？datatable说：很抱歉，我的信息都是dataset管理的。同样状态也由dataset管理。b.为什么是设定整个dataset的只读属性而不是设定某一个record的只读属性？dataset说：很是抱歉，虽然我有record对象，但是我的record对象不支持只读属性的设定。这样我们所有的重担都落到dataset上了，兴好dataset找到它的cursor兄弟。cursor说：反正页面上所有元素显示的值都是由我决定的。当dataset的readOnly为true时,这些元素也不可编辑，所以你直接在我(cussor)进行定