DataCell使用經驗總結

1、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 written permissio

2、n of the copyright owner. copyright 2006 by primeton technologies, ltd. all rights reserved. datacell 使用經驗總結 http:/ 2 頁 共 34 頁 文檔修訂記錄文檔修訂記錄 序號序號版本號版本號修訂日期修訂日期修訂概述修訂概述修訂人修訂人審批人審批人備注備注 10.12006-12-18創(chuàng)建丁嵐 20.22007-01-031.修改評審提出的意 見 2.加入 datacell 與模 態(tài)窗口結合 3.加入同一頁面使用 多個 datacell 丁嵐李一峰 datacell 使用經驗總結 htt

3、p:/ 3 頁 共 34 頁 目目 錄錄 1文檔摘要文檔摘要.4 1.1文檔分類.4 1.2關鍵字/tag.4 1.3摘要.4 1.4作者、協(xié)作者及評審人員.4 1.5定義、首字母縮寫詞及縮略語.4 2簡介簡介.5 2.1場景描述.5 2.2適用環(huán)境.5 3經驗總結經驗總結.5 3.1datacell 功能按鈕隱藏 .6 3.1.1功能要求.6 3.1.2實現(xiàn)原理.6 3.1.3使用方式.6 3.1.4存在問題.7 3.2datacell列排序.7 3.2.1功能要求.7 3.2.2實現(xiàn)原理.7 3.2.3實現(xiàn)方式.7 3.2.4存在問題.8 3.3datacell查詢功能實現(xiàn).8 3.3.1

4、功能要求.8 3.3.2實現(xiàn)原理.9 3.3.3實現(xiàn)方式.9 3.3.4存在問題.9 3.4datacell與模態(tài)窗口的結合.10 3.4.1功能要求.10 3.4.2實現(xiàn)原理.10 3.4.3實現(xiàn)方式.10 3.4.4存在問題.14 3.5同一頁面使用多個 datacell.14 3.5.1功能要求.14 3.5.2實現(xiàn)原理.15 3.5.3實現(xiàn)方式.15 3.5.4存在問題.18 3.6datacell按鈕 tip.18 3.6.1功能要求.18 3.6.2實現(xiàn)原理.18 datacell 使用經驗總結 http:/ 4 頁 共 34 頁 3.6.3實現(xiàn)方式.18 3.7form與 dat

5、acell聯(lián)合使用的解決方案.21 3.7.1功能要求.21 3.7.2實現(xiàn)原理.21 3.7.3實現(xiàn)方式.21 3.7.4存在問題.25 datacell 使用經驗總結 http:/ 5 頁 共 34 頁 1 文檔摘要文檔摘要 1.1 文檔分類文檔分類 經驗技巧開發(fā)調試 1.2 關鍵字關鍵字/tag datacell、richclient 1.3 摘要摘要 本文檔主要就使用 datacell 開發(fā)中經驗和技巧進行總結，為應用開發(fā)中特定情景 的功能實現(xiàn)提供思路，本文會涉及一部分與 datacell 構件特性相關的說明，詳細的構 件指南請參考eos5.1 程序員培訓教程.doc或者 eos 聯(lián)機

6、幫助。 1.4 作者、協(xié)作者及評審人員作者、協(xié)作者及評審人員 作者：丁嵐 協(xié)作者：劉聲斌、gocom 的眾多英雄們 評審人員：李一峰 1.5 定義、首字母縮寫詞及縮略語定義、首字母縮寫詞及縮略語 datacell: datacell 是 eos 針對 b/s 應用實現(xiàn)類似于 c/s 應用中的數(shù)據(jù)表格進行 數(shù)據(jù)修改刪除增加等維護操作提供的一個功能強大的表格數(shù)據(jù)編輯控件，這個控件能 夠完成 c/s 中如直接點擊修改、多行刪除和多行記錄增加以及排序等操作。 richclient:基于 j2ee 進行 b/s 程序開發(fā)過程中，應用開發(fā)復雜性和難度都是 比較大，為了提高開發(fā)效率和降低開發(fā)難度，在 eos

7、5.1 版本中普元提供了 richweb, 提供從運行時的構件到可視化開發(fā)工具到模板向導的解決方案。 datacell 使用經驗總結 http:/ 6 頁 共 34 頁 2 簡介簡介 2.1 場景描述場景描述 在實際應用中，如果 web 界面需要良好的交互性而且要避免不斷刷新頁面的話，我們首先考 慮的就是用 datecell 實現(xiàn)這樣的功能，當然我們需要排除下列不適合用 datacell 實現(xiàn)的情況： 1 表字段過多(超過 20 個)。 如果表字段超過 20 個，使用 datacell 實現(xiàn)不但影響頁面顯示效果，而且一個頁面顯 示的數(shù)據(jù)量過多會造成客戶端打開頁面緩慢，得不償失，建議使用普通 j

8、sp 查詢列表方 式實現(xiàn)。 2 字段間約束過多或者字段生成規(guī)則特殊。 如果字段間存在復雜約束，如某字段取值決定另幾個字段取值范圍或者取值類型，或 者字段值的生成規(guī)則依賴于其他字段取值，這樣的情況使用 datacell 實現(xiàn)要比 jsp 頁面實 現(xiàn)更費勁。 2.2 適用環(huán)境適用環(huán)境 eos5.1+，及所有支持的應用服務器。 支持 ie6 以上版本瀏覽器。 以下所涉及的 datacell 功能擴展基于 eos version: 5.1.2 build id: 0609201900_2587中的 datacell.js，此版本的 datacell.js 已經修改諸于日期為空時的顯示錯誤，提交字符串中

9、 間有空格報錯等 bug。 3 經驗總結經驗總結 3.1 datacell 功能按鈕隱藏功能按鈕隱藏 3.1.1 功能要求功能要求 某些特殊需求要求隱藏 datacell 功能按鈕，如主從表同時提交時隱藏 datacell 保 存按鈕等。 datacell 使用經驗總結 http:/ 7 頁 共 34 頁 3.1.2 實現(xiàn)原理實現(xiàn)原理 在 datacell 生成后在頁面將按鈕的顯示樣式置成不可見。 3.1.3 使用方式使用方式 將下列 javacript 代碼置于頁面 datacell 標簽之后將隱藏所有功能按鈕。 /datacellname 為 datacell 名稱 /首頁按鈕 docum

10、ent.all.item(datacellname_firstpage).style.display=none; /前一頁按鈕 document.all.item(datacellname_prepage).style.display=none; /下一頁按鈕 document.all.item(datacellname_nextpage).style.display=none; /尾頁按鈕 document.all.item(datacellname_lastpage).style.display=none; /重置按鈕 document.all.item(datacellname_rese

11、t).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.display=none; 也可以直接隱藏導航條。 /datacellname 為 datacell 名稱 document.all.item(datacellname_pilot).s

12、tyle.display=none; 3.1.4 存在問題存在問題 在隱藏按鈕后頁面顯示效果不佳，會出現(xiàn)下面的樣式。 datacell 使用經驗總結 http:/ 8 頁 共 34 頁 3.2 datacell 列排序列排序 3.2.1 功能要求功能要求 實現(xiàn) datacell 列排序功能。 3.2.2 實現(xiàn)原理實現(xiàn)原理 datacell 支撐列排序功能，點擊表頭時數(shù)據(jù)將按升序或倒序排列，如果查詢結果 只有一頁，那么 datacell 僅對當前頁數(shù)據(jù)排序，此時不調用業(yè)務邏輯；如果查詢結果 有多頁時，那么 datacell 根據(jù)點擊的列字段自動生成orderby節(jié)點，重新調用業(yè)務邏輯 進行查詢。

13、 3.2.3 實現(xiàn)方式實現(xiàn)方式 orderby 節(jié)點由 datacell 自動生成，格式如下。 fieldname 我們要做的就是判斷是否存在 orderby 節(jié)點，然后將其移動到查詢結果 list 下 datacell 使用經驗總結 http:/ 9 頁 共 34 頁 設置排序條件使用 bl_movenodebatch 構件將 orderby 移動到結果 list 節(jié)點下。 3.2.4 存在問題存在問題 因為 orderby 節(jié)點生成的格式固定，所以執(zhí)行查詢的數(shù)據(jù)庫操作構件只能使用非 queryform 相關查詢構件(運算構件名稱尾部不帶 ext，如 bl_queryentityallwit

14、hpage)。 3.3 datacell 查詢功能實現(xiàn)查詢功能實現(xiàn) 3.3.1 功能要求功能要求 為 datacell 增加查詢篩選功能。 3.3.2 實現(xiàn)原理實現(xiàn)原理 通過 datacell 初始化參數(shù)(initparam)傳入查詢條件，然后調用 reload 函數(shù)刷 新 datacell 實現(xiàn)查詢過濾。 datacell 使用經驗總結 http:/ 10 頁 共 34 頁 3.3.3 實現(xiàn)方式實現(xiàn)方式 1增加查詢條件輸入框和查詢按鈕。 根據(jù)需要在 jsp 頁面中新增查詢條件輸入框和一個查詢按鈕，注意此查詢按鈕并非一般情況 下提交表單中的 submit 按鈕，而是一個普通的 button，并

15、且按鈕 onclick 單擊事件調用我們用來實 現(xiàn)查詢功能的 javascript 函數(shù)。 姓名： 2新增查詢功能實現(xiàn) js 函數(shù) function querysubmit() / datacellid 指 datacell 名稱 datacellid.initparam = ; datacellid.nocount = false; if (document.form. name.value != ) var queryvalue = document.form. name.value; /將查詢條件拼接為可轉換為 xml 查詢節(jié)點的 datacell 初始化參數(shù) datacellid.in

16、itparam = %” +queryvalue+”%; /刷新 datacell 數(shù)據(jù) datacellid.reload(); 3.3.4 存在問題存在問題 因 datacell 列排序節(jié)點的自動生成形式的原因(詳見 3.2datacell 列排序)，查詢條件節(jié)點只能 按照非queryform 查詢結構拼接，也就是只能拼接成格式如下的節(jié)點。 %queryvalue% datacell 使用經驗總結 http:/ 11 頁 共 34 頁 3.4 datacell 與模態(tài)窗口的結合與模態(tài)窗口的結合 3.4.1 功能要求功能要求 實現(xiàn) datacell 某個單元格的值取自彈出的模態(tài)窗口，主要用于

17、單元格取值來自復 雜查詢結果的選擇。 3.4.2 實現(xiàn)原理實現(xiàn)原理 利用 onrefresh 事件生成調用模態(tài)窗口的按鈕，并將單元格行和列座標傳入調用模 態(tài)窗口的 js 函數(shù)，在模態(tài)窗口選擇相應的值后通過數(shù)組形式返回 datacell 所在頁面， 最后利用行和列座標將返回值回填至 datacell。 3.4.3 實現(xiàn)方式實現(xiàn)方式 1 創(chuàng)建 datacell 計費類型組 費 率 datacell 使用經驗總結 http:/ 12 頁 共 34 頁 2 編寫 onrefresh 事件 js 函數(shù)生成調用模態(tài)窗口的按鈕。 function cellrefresh( cell, fieldname,

18、entity) switch( ) case queryusggrp : /取得行坐標 var rindex = cell.parentnode.rowindex; /取得列坐標 var cindex = cell.cellindex; var ss1 = entity.getproperty(type_group_usg); /根據(jù)單元格的值是否存在判斷顯示選擇按鈕還是查看按鈕，按鈕 onclick 事件為自的多定義的 js 函數(shù) select_addusggrp，傳入三個參數(shù)分別為當前行座標，列座標和字段名稱 if(ss1=) cell.innerhtml = ; br

19、eak; else cell.innerhtml = ; break; case queryrate : datacell 使用經驗總結 http:/ 13 頁 共 34 頁 var rindex = cell.parentnode.rowindex; var cindex = cell.cellindex; var ss2 = entity.getproperty(rate_id); if(ss2 = ) cell.innerhtml = ; break; else cell.innerhtml = ; break; default: break; 3 模態(tài)窗口選定值后返回函數(shù) functi

20、on getselect() var namevalue = getselectedtexts(detail); var idvalue = getselectedvalues(detail); if( document.form1.detail.selectedindex != -1) var retarray = new array(); /返回數(shù)組 0 位置存入選定值描述 retarray0 = namevalue; /返回數(shù)據(jù) 1 位置存入選定值代碼 retarray1 = idvalue; window.returnvalue = retarray; window.close();

21、else alert(請先選擇一個計費類型組！); 4 編寫模態(tài)窗口調用 js 函數(shù)，我們來看其中一個模態(tài)窗口調用函數(shù)。 function select_addusggrp(rowindex, cellindex,usggrpid) var temp = ; /模態(tài)窗口返回值定義 var ret = showmodaldialog(common.pr.prqueryusggrp.do?descriptions/description_desc/criteria/v alue=+temp,status:false;dialogwidth:710px;dialogheight:500px); da

22、tacell 使用經驗總結 http:/ 14 頁 共 34 頁 if (!ret) / 沒有選擇直接返回 return; else /根據(jù)傳入的行座標得到操作的行 var row = eoslogictable.rowsrowindex; /得到行數(shù)據(jù)對象 var entity = row.entity; /將返回的選定值編碼放入指定的行字段對象中 entity.setproperty(usggrpid, ret1); /將返回的選定值描述放入指定的行字段對象中 entity.setproperty(type_group_usg_name, ret0); /在按鈕所在單元格對象值中放入選定值

23、的編碼 row.cellscellindex.value = ret1; /在按鈕前一個單元格中插入選定值的描述 row.cellscellindex-1.innerhtml = ret0; /行數(shù)據(jù)對象狀態(tài)設置為新增 /如果用戶要求選擇的值在保存后可以進行修改，而不象本例中只能查看，可以將兩個按鈕名稱都修如果用戶要求選擇的值在保存后可以進行修改，而不象本例中只能查看，可以將兩個按鈕名稱都修 改為選擇，然后調用不同的改為選擇，然后調用不同的 js 函數(shù)，修改這最后一句代碼為函數(shù)，修改這最后一句代碼為 entity.status = entity.status_modified，即可實現(xiàn)新增和修

24、改狀態(tài)下通過模態(tài)窗口取值，即可實現(xiàn)新增和修改狀態(tài)下通過模態(tài)窗口取值 entity.status = entity.status_new; 5 頁面實現(xiàn)效果 新增記錄時提供選擇按鈕，提供彈出模態(tài)窗口查詢功能。新增完畢后提供查看按鈕，提供彈 出模態(tài)窗口查詢選擇的信息。 彈出的模態(tài)窗口提供復雜查詢篩選。 datacell 使用經驗總結 http:/ 15 頁 共 34 頁 選擇后的返回選定值和描述信息回填至 datacell。 3.4.4 存在問題存在問題 從模態(tài)窗口返回值的回填都是采用行和列座標偏移的方式實現(xiàn)，編碼不直觀，而且容易出錯。 datacell 使用經驗總結 http:/ 16 頁 共

25、34 頁 3.5 同一頁面使用多個同一頁面使用多個 datacell 3.5.1 功能要求功能要求 實現(xiàn)同一頁面使用兩個或者多個 datacell，主要用于主從表關聯(lián)操作。 3.5.2 實現(xiàn)原理實現(xiàn)原理 在主表 datacell 中利用 onrefresh 事件 js 函數(shù)在指定列生成一個刷新子表 datacell 的按鈕，按鈕增加單擊響應 js 函數(shù)，函數(shù)中通過 reload 方法查詢刷新子表 datacell 記 錄，刷新子表的方式類似于 3.3datacell 查詢功能實現(xiàn)。 3.5.3 實現(xiàn)方式實現(xiàn)方式 以下通過一個省、地市管理功能來演示兩個 datacell 的關聯(lián)管理。 1 加入省

26、信息管理 datacell 省編碼 說明 地區(qū)代碼 操作 datacell 使用經驗總結 http:/ 17 頁 共 34 頁 2 加入地市信息管理 datacell 地市編碼 對應電話區(qū)號 公司描述 描述 datacell 使用經驗總結 http:/ 18 頁 共 34 頁 3 編寫省信息管理 datacell onrefresh函數(shù)provfresh function provfresh(cell, fieldname, entity) var provid = entity.getproperty(province_id); switch( ) /在操作列生成刷新地市

27、信息管理 datacell 的按鈕 case operator: if (provid != null /如果是第一行選定當前行，然后調用 reloadparams 函數(shù)將省編碼和名稱傳給地市信息管理 datacell if (isfirst) isfirst = false; _datacell_selectrow(cell.parentnode); reloadparams(provid, entity.getproperty(name); break; default:break; 4 編寫刷新地市信息管理 datacell js 函數(shù)reloadparams，后端業(yè)務邏輯的實現(xiàn)與一般

28、datacell 實現(xiàn)相同，在此不再累敘。 此實現(xiàn)中拼接 xml 節(jié)點方式與 3.3datacell 查詢功能實現(xiàn)一致 function reloadparams(entityname,descname) /將傳入的省名稱放入頁面指定位置,如 id 為 label_entity_desc 的頁面元素中，提示用戶當前操作的是 歸屬哪個省的地市信息 document.getelementbyid(label_entity_desc).innerhtml = 【 + descname + 】; /將傳入的省編碼拼接成 xml 節(jié)點形式，作為查詢條件傳入業(yè)務邏輯 city.initparam = +

29、entityname +; city.nocount=false; city.reload(); datacell 使用經驗總結 http:/ 19 頁 共 34 頁 5 最終頁面效果 我的例子：/兩個 datacell 的例子，上下級聯(lián)，進入頁面時下 dc 默認現(xiàn)實上 dc 的第一行信息， /之后用戶點擊上 dc 哪一行，就現(xiàn)實哪一行信息。 datacell 使用經驗總結 http:/ 20 頁 共 34 頁 var isfirst = true; 查詢條件 圖書分類： isbn 編號： 圖書名稱： 每頁顯示行數(shù)據(jù) datacell 使用經驗總結 http:/ 21 頁 共 34 頁 isb

30、n 編碼號 圖書名稱 作者 出版社 出版日期 單價 數(shù)量 備注 datacell 使用經驗總結 http:/ 22 頁 共 34 頁 圖書編碼 圖書來源 購入日期 購入價格 存放位置 圖書狀態(tài) 已損壞否 datacell 使用經驗總結 http:/ 23 頁 共 34 頁 function initparam(cell) cell.addonrowselectedlistener(clickpos,); function clickpos(row) var tsid= row.entity.getproperty(tsid); document.getelementbyid(px_ts/tsi

31、d).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; sec

32、ondtable.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); s

33、econdtable.refresh(); datacell 使用經驗總結 http:/ 24 頁 共 34 頁 上圖： 3.5.4 存在問題存在問題 同一頁面使用多個 datacell 一定要考慮頁面執(zhí)行效率問題，如果表字段過多，而且都需要在 頁面維護，建議使用其他方式實現(xiàn)，避免因為字段數(shù)量過大影響頁面操作。 3.6 datacell 按鈕按鈕 tip 3.6.1 功能要求功能要求 為 datacell 功能按鈕增加 tip，給操作員較友好的提示。 3.6.2 實現(xiàn)原理實現(xiàn)原理 datecell 導航條(pilot)功能按鈕已經響應了 onmouseover 事件，在事件中加入對按 鈕名稱的

34、翻譯和顯示就可以達到我們需要的效果。 datacell 使用經驗總結 http:/ 25 頁 共 34 頁 3.6.3 實現(xiàn)方式實現(xiàn)方式 1datacell.js 加入頁面對象顯示提示函數(shù) /根據(jù)頁面對象彈出提示方法 /x,y 參數(shù)表示鼠標的屏幕坐標，調用時直接輸入 window.event.clientx ,window.event.clienty /劉聲斌 add 2006-11-17 var opopup = window.createpopup(); /obj 為需顯示名稱的頁面對象 function tip(x,y,obj) with (opopup.document.body) s

35、tyle.fontsize =12px; style.backgroundcolor=lightyellow; style.border=solid black 1px; /tip_name 函數(shù)為新增的名稱轉換函數(shù)，見下一節(jié) 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); 2data

36、cell.js 加入名稱轉換函數(shù) 此函數(shù)根據(jù)傳入的按鈕名稱返回中文提示內容。 function tip_name(ename) var ret = 提示 switch( ename ) case firstpage : ret = 首頁 break; case prepage : ret = 前一頁 break; case nextpage : datacell 使用經驗總結 http:/ 26 頁 共 34 頁 ret = 后一頁 break; case lastpage : ret = 尾頁 break; case addrow : ret = 增加 break; case deleter

37、ow : ret = 刪除 break; case submit : ret = 保存 break; case reset : ret = 刷新 break; return ret; 3修改導航條功能按鈕鼠標響應事件 紅字為加入的代碼。 function _pilot_button_onmouseover() event.cancelbubble = true; var button = event.srcelement; /調用 tip 函數(shù)，傳入頁面對象 x,y 軸位置和按鈕對象 tip(window.event.clientx ,window.event.clienty,button);

38、 button_switchimg( button, 1 ); datacell 使用經驗總結 http:/ 27 頁 共 34 頁 4頁面效果 3.7 form 與與 datacell 聯(lián)合使用的解決方案聯(lián)合使用的解決方案 3.7.1 功能要求功能要求 實現(xiàn)對主從表記錄維護的功能，維護主表信息的同時維護明細表記錄，并在同一 事務中實現(xiàn)數(shù)據(jù)提交。 3.7.2 實現(xiàn)原理實現(xiàn)原理 eos 中最方便實現(xiàn)主從記錄維護的方式就是表單(form)與 datacell 相結合，同時 提交 form 和 datacell 的信息。 我們可以通過 javascript 將 datacell 中記錄數(shù)據(jù)變更的節(jié)點值放入表單中一個隱 藏的表單域，然后在表單提交時與表單數(shù)據(jù)一起保存到數(shù)據(jù)庫。 3.7.3 實現(xiàn)方式實現(xiàn)方式 開源框架 fbframe 中角色管理頁面是 datacell 實現(xiàn)，我們在這個功能基礎上進行 一些修改來演示這個實現(xiàn)方案。 在角色管理 datacell 上方加入一個 form 和一個 javascript 函數(shù)，注意不要將 datacell 包含在 form 中，否則頁面會出現(xiàn)錯誤。 datacell 使用經驗總結 http:/ 28 頁 共 34 頁 應用 id： 應