DataCell使用经验总结

1、1 / 34 文档可自由编辑打印PRIMETON TECHNOLOGIES, LTD.上海普元信息技术有限责任公司上海普元信息技术有限责任公司DataCell 使用经验总结使用经验总结经验技巧总结经验技巧总结No part of this document may be reproduced, stored in any electronic retrieval system, or transmitted in any form or by any means, mechanical, photocopying, recording, otherwise, without the writt

2、en permission of the copyright owner.COPYRIGHT 2006 by Primeton Technologies, Ltd. ALL RIGHTS RESERVED.2 / 34 文档可自由编辑打印文档修订记录文档修订记录序号序号版本号版本号修订日期修订日期修订概述修订概述修订人修订人审批人审批人备注备注10.12006-12-18创建丁岚20.22007-01-031.修改评审提出的意见2.加入 DataCell 与模态窗口结合3.加入同一页面使用多个 DataCell丁岚李一峰3 / 34 文档可自由编辑打印目目 录录1文档摘要文档摘要.41.1文档

3、分类.41.2关键字/TAG.41.3摘要.41.4作者、协作者及评审人员.41.5定义、首字母缩写词及缩略语.42简介简介.52.1场景描述.52.2适用环境.53经验总结经验总结.53.1DATACELL 功能按钮隐藏 .63.1.1功能要求.63.1.2实现原理.63.1.3使用方式.63.1.4存在问题.73.2DATACELL列排序.73.2.1功能要求.73.2.2实现原理.73.2.3实现方式.73.2.4存在问题.83.3DATACELL查询功能实现.83.3.1功能要求.83.3.2实现原理.93.3.3实现方式.93.3.4存在问题.93.4DATACELL与模态窗口的结合

4、.103.4.1功能要求.103.4.2实现原理.103.4.3实现方式.103.4.4存在问题.143.5同一页面使用多个 DATACELL.143.5.1功能要求.143.5.2实现原理.153.5.3实现方式.153.5.4存在问题.183.6DATACELL按钮 TIP.183.6.1功能要求.183.6.2实现原理.184 / 34 文档可自由编辑打印3.6.3实现方式.183.7FORM与 DATACELL联合使用的解决方案.213.7.1功能要求.213.7.2实现原理.213.7.3实现方式.213.7.4存在问题.255 / 34 文档可自由编辑打印1 文档摘要文档摘要1.1

5、 文档分类文档分类经验技巧开发调试1.2 关键字关键字/TagDataCell、RichClient1.3 摘要摘要本文档主要就使用 DataCell 开发中经验和技巧进行总结，为应用开发中特定情景的功能实现提供思路，本文会涉及一部分与 DataCell 构件特性相关的说明，详细的构件指南请参考EOS5.1 程序员培训教程.doc或者 EOS 联机帮助。1.4 作者、协作者及评审人员作者、协作者及评审人员作者：丁岚协作者：刘声斌、GoCom 的众多英雄们评审人员：李一峰1.5 定义、首字母缩写词及缩略语定义、首字母缩写词及缩略语DataCell: DataCell 是 EOS 针对 B/S 应

6、用实现类似于 C/S 应用中的数据表格进行数据修改删除增加等维护操作提供的一个功能强大的表格数据编辑控件，这个控件能够完成 C/S 中如直接点击修改、多行删除和多行记录增加以及排序等操作。RichClient:基于 J2EE 进行 B/S 程序开发过程中，应用开发复杂性和难度都是比较大，为了提高开发效率和降低开发难度，在 EOS5.1 版本中普元提供了 RichWeb,提供从运行时的构件到可视化开发工具到模板向导的解决方案。6 / 34 文档可自由编辑打印2 简介简介2.1 场景描述场景描述在实际应用中，如果 Web 界面需要良好的交互性而且要避免不断刷新页面的话，我们首先考虑的就是用 Dat

7、eCell 实现这样的功能，当然我们需要排除下列不适合用 DataCell 实现的情况：1 表字段过多(超过 20 个)。如果表字段超过 20 个，使用 DataCell 实现不但影响页面显示效果，而且一个页面显示的数据量过多会造成客户端打开页面缓慢，得不偿失，建议使用普通 JSP 查询列表方式实现。2 字段间约束过多或者字段生成规则特殊。如果字段间存在复杂约束，如某字段取值决定另几个字段取值范围或者取值类型，或者字段值的生成规则依赖于其他字段取值，这样的情况使用 DataCell 实现要比 JSP 页面实现更费劲。2.2 适用环境适用环境EOS5.1+，及所有支持的应用服务器。支持 IE6

8、以上版本浏览器。以下所涉及的 DataCell 功能扩展基于 EOS Version: 5.1.2 Build id: 0609201900_2587中的datacell.js，此版本的 datacell.js 已经修改诸于日期为空时的显示错误，提交字符串中间有空格报错等 Bug。3 经验总结经验总结3.1 DataCell 功能按钮隐藏功能按钮隐藏3.1.1 功能要求功能要求某些特殊需求要求隐藏 DataCell 功能按钮，如主从表同时提交时隐藏 DataCell 保存按钮等。7 / 34 文档可自由编辑打印3.1.2 实现原理实现原理在 DataCell 生成后在页面将按钮的显示样式置成不

9、可见。3.1.3 使用方式使用方式将下列 javacript 代码置于页面 DataCell 标签之后将隐藏所有功能按钮。 /datacellname 为 DataCell 名称 /首页按钮document.all.item(datacellname_firstPage).style.display=none;/前一页按钮document.all.item(datacellname_prePage).style.display=none;/下一页按钮document.all.item(datacellname_nextPage).style.display=none;/尾页按钮document

10、.all.item(datacellname_lastPage).style.display=none;/重置按钮document.all.item(datacellname_reset).style.display=none;/保存按钮 document.all.item(datacellname_submit).style.display=none; /新增按钮document.all.item(datacellname_addrow).style.display=none; /删除按钮document.all.item(datacellname_deleterow).style.disp

11、lay=none;也可以直接隐藏导航条。 /datacellname 为 DataCell 名称document.all.item(datacellname_pilot).style.display=none;3.1.4 存在问题存在问题在隐藏按钮后页面显示效果不佳，会出现下面的样式。8 / 34 文档可自由编辑打印3.2 DataCell 列排序列排序3.2.1 功能要求功能要求实现 DataCell 列排序功能。3.2.2 实现原理实现原理DataCell 支撑列排序功能，点击表头时数据将按升序或倒序排列，如果查询结果只有一页，那么 DataCell 仅对当前页数据排序，此时不调用业务逻辑

12、；如果查询结果有多页时，那么 DataCell 根据点击的列字段自动生成orderby节点，重新调用业务逻辑进行查询。3.2.3 实现方式实现方式orderby 节点由 DataCell 自动生成，格式如下。 fieldname 我们要做的就是判断是否存在 orderby 节点，然后将其移动到查询结果 List 下9 / 34 文档可自由编辑打印设置排序条件使用 BL_moveNodeBatch 构件将 orderby 移动到结果 list 节点下。3.2.4 存在问题存在问题因为 orderby 节点生成的格式固定，所以执行查询的数据库操作构件只能使用非QueryForm 相关查询构件(运算

13、构件名称尾部不带 Ext，如 BL_queryEntityAllWithPage)。3.3 DataCell 查询功能实现查询功能实现3.3.1 功能要求功能要求为 DataCell 增加查询筛选功能。3.3.2 实现原理实现原理通过 DataCell 初始化参数(initParam)传入查询条件，然后调用 reload 函数刷新 DataCell 实现查询过滤。10 / 34 文档可自由编辑打印3.3.3 实现方式实现方式1增加查询条件输入框和查询按钮。根据需要在 JSP 页面中新增查询条件输入框和一个查询按钮，注意此查询按钮并非一般情况下提交表单中的 submit 按钮，而是一个普通的 b

14、utton，并且按钮 onclick 单击事件调用我们用来实现查询功能的 javascript 函数。姓名：2新增查询功能实现 Js 函数function querySubmit() / datacellid 指 DataCell 名称datacellid.initParam = ;datacellid.noCount = false;if (document.Form. Name.value != ) var queryValue = document.Form. Name.value; /将查询条件拼接为可转换为 XML 查询节点的 DataCell 初始化参数 datacellid.in

15、itParam = %”+queryValue+”%; /刷新 DataCell 数据datacellid.reload();3.3.4 存在问题存在问题因 DataCell 列排序节点的自动生成形式的原因(详见 3.2DataCell 列排序)，查询条件节点只能按照非QueryForm 查询结构拼接，也就是只能拼接成格式如下的节点。 %queryValue%11 / 34 文档可自由编辑打印3.4 DataCell 与模态窗口的结合与模态窗口的结合3.4.1 功能要求功能要求实现 DataCell 某个单元格的值取自弹出的模态窗口，主要用于单元格取值来自复杂查询结果的选择。3.4.2 实现原

16、理实现原理利用 onrefresh 事件生成调用模态窗口的按钮，并将单元格行和列座标传入调用模态窗口的 Js 函数，在模态窗口选择相应的值后通过数组形式返回 DataCell 所在页面，最后利用行和列座标将返回值回填至 DataCell。3.4.3 实现方式实现方式1 创建 DataCell计费类型组费率12 / 34 文档可自由编辑打印 2 编写 onrefresh 事件 Js 函数生成调用模态窗口的按钮。function cellRefresh( cell, fieldName, entity)switch( )case queryUsgGrp : /取得行坐标var

17、rIndex = cell.parentNode.rowIndex; /取得列坐标var cIndex = cell.cellIndex;var ss1 = entity.getProperty(TYPE_GROUP_USG); /根据单元格的值是否存在判断显示选择按钮还是查看按钮，按钮 onclick 事件为自的多定义的Js 函数 select_AddUsgGrp，传入三个参数分别为当前行座标，列座标和字段名称if(ss1=)cell.innerHTML = ;break;elsecell.innerHTML = ;break;case queryRate :13 / 34 文档可自由编辑打

18、印var rIndex = cell.parentNode.rowIndex;var cIndex = cell.cellIndex;var ss2 = entity.getProperty(RATE_ID);if(ss2 = )cell.innerHTML = ;break;elsecell.innerHTML = ;break;default:break;3 模态窗口选定值后返回函数function getSelect()var nameValue = getSelectedTexts(detail); var idValue = getSelectedValues(detail);if(

19、 document.form1.detail.selectedIndex != -1)var retArray = new Array(); /返回数组 0 位置存入选定值描述retArray0 = nameValue; /返回数据 1 位置存入选定值代码retArray1 = idValue;window.returnValue = retArray; window.close();elsealert(请先选择一个计费类型组！);4 编写模态窗口调用 Js 函数，我们来看其中一个模态窗口调用函数。function select_AddUsgGrp(rowIndex, cellIndex,us

20、gGrpID)var temp = ; /模态窗口返回值定义var ret = showModalDialog(common.pr.prQueryUsgGrp.do?DESCRIPTIONS/DESCRIPTION_DESC/criteria/value=+temp,status:false;dialogWidth:710px;dialogHeight:500px);14 / 34 文档可自由编辑打印if (!ret)/ 没有选择直接返回return;else/根据传入的行座标得到操作的行var row = eosLogicTable.rowsrowIndex; /得到行数据对象var ent

21、ity = row.entity;/将返回的选定值编码放入指定的行字段对象中entity.setProperty(usgGrpID, ret1); /将返回的选定值描述放入指定的行字段对象中entity.setProperty(TYPE_GROUP_USG_NAME, ret0); /在按钮所在单元格对象值中放入选定值的编码row.cellscellIndex.value = ret1; /在按钮前一个单元格中插入选定值的描述row.cellscellIndex-1.innerHTML = ret0; /行数据对象状态设置为新增 /如果用户要求选择的值在保存后可以进行修改，而不象本例中只能查看

22、，可以将两个按钮名称都修如果用户要求选择的值在保存后可以进行修改，而不象本例中只能查看，可以将两个按钮名称都修改为选择，然后调用不同的改为选择，然后调用不同的 Js 函数，修改这最后一句代码为函数，修改这最后一句代码为 entity.status = Entity.STATUS_MODIFIED，即可实现新增和修改状态下通过模态窗口取值，即可实现新增和修改状态下通过模态窗口取值entity.status = Entity.STATUS_NEW;5 页面实现效果新增记录时提供选择按钮，提供弹出模态窗口查询功能。新增完毕后提供查看按钮，提供弹出模态窗口查询选择的信息。弹出的模态窗口提供复杂查询筛选

23、。15 / 34 文档可自由编辑打印选择后的返回选定值和描述信息回填至 DataCell。3.4.4 存在问题存在问题从模态窗口返回值的回填都是采用行和列座标偏移的方式实现，编码不直观，而且容易出错。16 / 34 文档可自由编辑打印3.5 同一页面使用多个同一页面使用多个 DataCell 3.5.1 功能要求功能要求实现同一页面使用两个或者多个 DataCell，主要用于主从表关联操作。3.5.2 实现原理实现原理在主表 DataCell 中利用 onrefresh 事件 Js 函数在指定列生成一个刷新子表 DataCell的按钮，按钮增加单击响应 Js 函数，函数中通过 reload 方

24、法查询刷新子表 DataCell 记录，刷新子表的方式类似于 3.3DataCell 查询功能实现。3.5.3 实现方式实现方式以下通过一个省、地市管理功能来演示两个 DataCell 的关联管理。1 加入省信息管理 DataCell省编码说明地区代码操作17 / 34 文档可自由编辑打印2 加入地市信息管理 DataCell地市编码对应电话区号公司描述描述18 / 34 文档可自由编辑打印3 编写省信息管理 DataCell onrefresh函数provFreshfunction provFresh(cell, fieldName, entity) var provid = entity.

25、getProperty(PROVINCE_ID);switch( ) /在操作列生成刷新地市信息管理 DataCell 的按钮case operator: if (provid != null & provid != ) /生成的按钮指定 onclick 事件函数 reloadParams cell.innerHTML = ; /如果是第一行选定当前行，然后调用 reloadParams 函数将省编码和名称传给地市信息管理DataCell if (isFirst) isFirst = false;_datacell_selectRow(cell.parentNode

26、);reloadParams(provid, entity.getProperty(NAME); break;default:break;4 编写刷新地市信息管理 DataCell Js 函数reloadParams，后端业务逻辑的实现与一般DataCell 实现相同，在此不再累叙。此实现中拼接 XML 节点方式与 3.3DataCell 查询功能实现一致function reloadParams(entityName,descName) /将传入的省名称放入页面指定位置,如 Id 为 label_entity_desc 的页面元素中，提示用户当前操作的是归属哪个省的地市信息document.

27、getElementById(label_entity_desc).innerHTML = 【 + descName + 】; /将传入的省编码拼接成 XML 节点形式，作为查询条件传入业务逻辑city.initParam = + entityName +;city.noCount=false;city.reload();19 / 34 文档可自由编辑打印5 最终页面效果我的例子：/两个 DataCell 的例子，上下级联，进入页面时下 DC 默认现实上 DC 的第一行信息，/之后用户点击上 DC 哪一行，就现实哪一行信息。20 / 34 文档可自由编辑打印var isFirst = true

28、; 查询条件图书分类： ISBN 编号： 图书名称：每页显示行数据 21 / 34 文档可自由编辑打印ISBN 编码号图书名称作者出版社出版日期单价数量备注22 / 34 文档可自由编辑打印图书编码图书来源购入日期购入价格存放位置图书状态已损坏否23 / 34 文档可自由编辑打印function initParam(cell) cell.addOnrowSelectedListener(clickPos,);function clickPos(row) var TSID= row.entity.getProperty(TSID);document.getElementById(PX_TS/TS

29、ID).value = TSID;secondtable.initParam = +TSID+;secondtable.reload();function cellFresh(cell, fieldName, entity) var value = entity.getProperty( fieldName );if (isFirst) isFirst = false;_datacell_selectRow(cell.parentNode);function initParam2(secondtable) secondtable.addrow = addDataColumn;secondtab

30、le.add = _datacell_addrow;function addDataColumn() var tsid = document.getElementById(PX_TS/TSID).value;if (tsid = null | tsid = ) alert(请选中一条图书记录！);return;secondtable.add();var newEntity = secondtable.dataset.entitiessecondtable.dataset.cur_index;newEntity.setProperty(TSID,trim(tsid);secondtable.re

31、fresh();24 / 34 文档可自由编辑打印上图：3.5.4 存在问题存在问题同一页面使用多个 DataCell 一定要考虑页面执行效率问题，如果表字段过多，而且都需要在页面维护，建议使用其他方式实现，避免因为字段数量过大影响页面操作。3.6 DataCell 按钮按钮 Tip3.6.1 功能要求功能要求为 DataCell 功能按钮增加 Tip，给操作员较友好的提示。3.6.2 实现原理实现原理DateCell 导航条(pilot)功能按钮已经响应了 onmouseover 事件，在事件中加入对按钮名称的翻译和显示就可以达到我们需要的效果。25 / 34 文档可自由编辑打印3.6.3

32、实现方式实现方式1datacell.js 加入页面对象显示提示函数/根据页面对象弹出提示方法/X,Y 参数表示鼠标的屏幕坐标，调用时直接输入 window.event.clientX ,window.event.clientY/刘声斌 add 2006-11-17var oPopup = window.createPopup();/obj 为需显示名称的页面对象function tip(X,Y,obj) with (oPopup.document.body) style.fontSize =12px;style.backgroundColor=lightyellow;style.border=

33、solid black 1px; /tip_name 函数为新增的名称转换函数，见下一节innerHTML=tip_name();var wid = oPopup.document.body.innerHTML.length;wid = wid*13; / oPopup.show(X 轴位置, Y 轴位置, 宽度, 高度, 显示内容)oPopup.show(X, Y-30, wid, 18, document.body);2datacell.js 加入名称转换函数此函数根据传入的按钮名称返回中文提示内容。function tip_name(ename)var ret = 提示s

34、witch( ename )case firstPage : ret = 首页break;case prePage : ret = 前一页break;case nextPage : 26 / 34 文档可自由编辑打印ret = 后一页break;case lastPage : ret = 尾页break;case addrow : ret = 增加break;case deleterow : ret = 删除break;case submit : ret = 保存break;case reset : ret = 刷新break;return ret;3修改导航条功能按钮鼠标响应事件红字为加入的

35、代码。function _pilot_button_onmouseover()event.cancelBubble = true;var button = event.srcElement; /调用 tip 函数，传入页面对象 X,Y 轴位置和按钮对象tip(window.event.clientX ,window.event.clientY,button);button_switchImg( button, 1 );27 / 34 文档可自由编辑打印4页面效果3.7 Form 与与 DataCell 联合使用的解决方案联合使用的解决方案3.7.1 功能要求功能要求实现对主从表记录维护的功能，

36、维护主表信息的同时维护明细表记录，并在同一事务中实现数据提交。3.7.2 实现原理实现原理EOS 中最方便实现主从记录维护的方式就是表单(Form)与 DataCell 相结合，同时提交 Form 和 DataCell 的信息。我们可以通过 Javascript 将 DataCell 中记录数据变更的节点值放入表单中一个隐藏的表单域，然后在表单提交时与表单数据一起保存到数据库。3.7.3 实现方式实现方式开源框架 fbframe 中角色管理页面是 DataCell 实现，我们在这个功能基础上进行一些修改来演示这个实现方案。在角色管理 DataCell 上方加入一个 Form 和一个 Javascript 函数，注意不要将DataCell 包含在 For