web|設計

設計

--------------------------------------------------------------------------------



簡介

本文介紹了一種WEB報表設計工具的實現(xiàn)思路和解決辦法，該工具可以同數(shù)據(jù)庫連接，讓用戶自己設計報表，報表的數(shù)據(jù)從數(shù)據(jù)庫中獲取，用戶修改后的數(shù)據(jù)可以存回到數(shù)據(jù)庫中。該工具可以實現(xiàn)任意形式（規(guī)整、不規(guī)整）的報表設計；不僅可以作為最終產品提交給用戶使用，對于開發(fā)人員來說，也可以作為報表和數(shù)據(jù)庫的設計工具來開發(fā)自己的產品。一個目的：讓開發(fā)人員（至少是本人）不再做“報表苦力”。

前言與問題的提出

本人在C/S結構和B/S結構的軟件開發(fā)過程中，碰到大量的設計報表的工作。用戶有大量各式各樣的報表需要實現(xiàn)，并且在系統(tǒng)驗收后用戶還會有一些報表需要實現(xiàn)。在開發(fā)C/S結構報表時使用PB，EXCEL，F(xiàn)ORMULA ONE等工具埋頭畫表，在開發(fā)B/S機構的報表時使用ASP，XML/XSL等一個格一個格產生表；好半天完成了報表的樣式設計，以為可以歇口氣了，但還不行，還需要設計數(shù)據(jù)庫，設計產生報表的方法函數(shù)，還要設計修改報表的接口、保存數(shù)據(jù)的函數(shù)；每一張報表都得開發(fā)人員親自完成；好不容易提交用戶測試了，用戶又說：某某表的格式不對、某某表的公式不對、某某表的大小不對、幫忙增加幾份新表……搞得人昏頭漲腦，剛剛才有的一點成就感、一絲輕松又被嘆氣、唉聲給沖跑了……要是能讓用戶自己去做這些污七八糟的事就好了！

正好接到一個金融系統(tǒng)的WEB辦公系統(tǒng)項目，要實現(xiàn)的報表就有厚厚的一大摞，這還只是初步的需求，干脆，就設計一個“報表設計工具”，希望能解放以后的報表工作；當然，是在WEB上實現(xiàn)。

做報表設計工具，我以前做C/S結構的系統(tǒng)時就做過，也實現(xiàn)了（用PB6），用戶用的也挺好。但是有缺點：一是不好移植在WEB上使用，二是只能顯示報表，不能修改報表中的數(shù)據(jù)，當然更不能增加數(shù)據(jù)了。在WEB上又該如何實現(xiàn)呢？

實現(xiàn)的方式

要做WEB報表設計工具，必須先要知道報表什么東西？是如何產生和實現(xiàn)的？先理一理思路。

報表是什么？這個好說，就是把一些數(shù)據(jù)放在固定格式的固定位置上的表格。既然是表格，那么就有“表”有“格”，先要一個“格”一個 “格” 地“拼”出一“行”或一“列”來，再要一“行（列）”一“行（列）”地“拼”出一個“表”來。

雖然同樣是由格子“拼”出來的，但有的表就好畫，有的不好畫，如下圖1和圖2所示：



圖1



圖2

明顯地圖1所示的報表比圖2所示的報表要好“畫”，我們將圖1類型的表稱作“規(guī)整報表”，而將圖2類型的報表稱作“不規(guī)整報表”。

說了半天廢話，那么報表到底是如何產生和實現(xiàn)的呢？本人認為不外乎兩種方式：“畫”和“填”。

“畫表”就是產生一格的同時也將數(shù)據(jù)按格式放在格子內，就是格式數(shù)據(jù)同時產生，這樣整個表格畫完了，表中的數(shù)據(jù)也有了，報表就生成了。這種方式適合于用來產生規(guī)整的報表，這樣才可以逐行或逐列的畫出該報表。這種方式的優(yōu)點是產生報表快（成批處理數(shù)據(jù)）、處理程序簡單（一個循環(huán)語句就可以了）。

“填表”與“畫表”完全不同，他是必須先有表格格式，然后將指定的數(shù)據(jù)填在指定的表格位置中就可以了。這種方式既適合于用來產生不規(guī)整的報表，也適用于產生規(guī)整報表。這種方式的優(yōu)點當然就是適用范圍廣，但缺點也有，就是速度慢，因為它要先獲取表樣，然后一個一個地取出數(shù)據(jù),再一個一個地填在格中。

那么應該采取哪種實現(xiàn)方式呢？有兩種解決方案：

1．分開處理：讓用戶在設計報表時確定報表是否規(guī)整（這是很簡單的事），如果規(guī)整就讓該報表采用“畫表”方式產生，否則采用“填表”方式產生。

2．統(tǒng)一處理：全部采用“填表”方式產生。

本人覺得現(xiàn)在計算機的速度仍然在飛快的提高，硬件的“快”可以消除軟件的“慢”，但主要是為了簡化軟件的設計和處理，采用了第二種實現(xiàn)方式：填表。

決定了實現(xiàn)的方式，開始考慮一些細節(jié)和技術上的事情了：要實現(xiàn)這個WEB報表設計工具，需要考慮哪些方面的事情，需要解決一些什么問題呢？

需要解決的問題

現(xiàn)在要考慮如何實現(xiàn)了。剛開始，初略一想，不就解決這幾個問題嗎：

1．如何畫表即如何產生表樣？必須是在瀏覽器內實現(xiàn)喲！

——簡單：使用DHTML就行，結合使用XML/XSL。

2．如何保存表樣？

——簡單：都存在數(shù)據(jù)庫的TEXT字段中

3．如何與數(shù)據(jù)庫連接？

——簡單：專門定義一個屬性來與表示

4．如何顯示數(shù)據(jù)？

——簡單：使用DHTML技術、結合XML/XSL就可以實現(xiàn)

5．如何修改數(shù)據(jù)？

——簡單：檢測事件不就可以了嗎！

6．如何保存數(shù)據(jù)？

——簡單：寫在數(shù)據(jù)庫中就行。

仔細一想，才發(fā)現(xiàn)這里面問題多多：

7．怎么畫表？用什么畫？特別是必須在瀏覽器內實現(xiàn)。

8．如何設計表格樣式？如粗體、下劃線、斜體、小數(shù)字數(shù)、合并表格、刪除表格等等樣式設計操作。

9．表樣如何保存？以什么格式保存？存在哪兒？

10．數(shù)據(jù)顯示的位置如何定義？怎樣定義？定義的結果如何保存？存在哪兒？又如何填數(shù)據(jù)？

11．單個數(shù)據(jù)顯示的格式如何定義？怎樣定義？定義的結果如何保存？存在哪兒？

12．報表如何與數(shù)據(jù)庫連接？如何獲取報表數(shù)據(jù)？獲取數(shù)據(jù)的條件如何定義？怎樣定義？定義的結果如何保存？存在哪兒？

13．用戶要新增一張報表，又沒有現(xiàn)成的數(shù)據(jù)庫表對應，該如何讓用戶來設計數(shù)據(jù)庫？數(shù)據(jù)庫又該如何設計？

14．用戶如何知道數(shù)據(jù)庫定義的含義？如何知道某個格應該取數(shù)據(jù)庫表中的哪個字段、哪個記錄？

15．如何知道用戶修改（增加）了報表數(shù)據(jù)？該數(shù)據(jù)如何與數(shù)據(jù)庫表中的字段對應？如何才知道哪些格中的數(shù)據(jù)合起來是數(shù)據(jù)庫表中的一條完整記錄？又怎樣才能知道用戶輸入的數(shù)據(jù)足夠組成一條完整記錄？怎樣保存這些修改（增加）的數(shù)據(jù)呢？

16．有些根本不需要單獨建立數(shù)據(jù)庫表來保存的數(shù)據(jù)，又該如何保存？

17．報表的數(shù)據(jù)平衡關系設計？又如何定義？定義的結果如何保存？存在哪兒？

18．自動計算公式如何實現(xiàn)？又如何定義？定義的結果如何保存？存在哪兒？

19．如何從其它報表中提取數(shù)據(jù)來產生新報表？如何定義？定義的結果如何保存？存在哪兒？

20．如何定義報表的匯總（由分支機構的數(shù)據(jù)產生總機構的數(shù)據(jù)）？定義的結果如何保存？存在哪兒？

21．如何實現(xiàn)數(shù)據(jù)的上報----即數(shù)據(jù)格式的轉換？轉換程序如何設計？如何保存？存在哪兒？

……

越想問題越多，就越覺得麻煩，干脆放棄算了——苦力就做苦力吧，象本人這種手腳慢的人，也許設計完這個工具的時間，一大堆報表早就做完了。

回頭看看為設計這個報表工具寫的筆記和收集的資料，心有不甘；再掂掂報表的份量，太重又太多——難道老做苦力嗎？不行！為自己的將來現(xiàn)在麻煩一點也值！可是這么多的問題需要解決，千頭萬緒一團糟，該如何開頭呢？關鍵的問題是什么？

問題的關鍵

看看窗外的風景，等到靜下心來，再看看這些羅列的問題，一個問題一個問題逐個進行衡量和比較，才發(fā)現(xiàn)首先要解決的問題就是“表樣設計工具”該如何實現(xiàn)。因為報表的設計、顯示、修改、保存等全部操作都是在該工具環(huán)境中實現(xiàn)的，數(shù)據(jù)庫的連接、表樣的保存等等工作都得圍繞該工具的表現(xiàn)形式和接口形式來實現(xiàn)和調整。

既然找到了工作的頭緒，那么開始設計吧！不要忙，“工具”的設計方案還沒有定呢！

幾種方案的比較

要在WEB上實現(xiàn)表樣的設計有很多種方案可供選擇：

1．使用XML/XSL/DHTML/HTML技術來實現(xiàn)

2．利用IE的WebBrowser ActiveX 控件來實現(xiàn)

3．自己寫ActiveX控件

4．自己寫Java Applet來實現(xiàn)

5．借用現(xiàn)成的第三方控件實現(xiàn)

那么哪種方案對本人來講是比較好的呢？

先來了解各個方案的特點，將結果列表如下：



如果能夠獲取免費的第三方軟件，無疑是第5種方案最好。找找看，有沒有。還真找到了，就是Microsoft Office Web Components 中的SheetSpace控件,雖然不是免費的（必須要MS Office2000+支持），但用戶都有使用MS Office,不僅開發(fā)成本降了，用戶操作也習慣，就選他了——Microsoft Office Web Components中的SheetSpace控件。

解決的辦法

既然關鍵的問題解決了，其它的就都好辦了，下面整理后列舉了相關問題的解決辦法：

1．如何畫表即如何產生表樣？必須是在瀏覽器內實現(xiàn)喲！

——在Microsoft Office Web Components中的SheetSpace控件內設計表樣，或者在MS EXCEL內設計好表樣，再將其導入到Microsoft Office Web Components中的SheetSpace控件中顯示出來；設計一個導入MS EXCEL的程序。數(shù)據(jù)顯示格式、分頁、固定表頭、字體大小、顏色等等都在設計在表樣中。

2．如何保存表樣？以什么格式保存？存在哪兒？

——將Microsoft Office Web Components中的SheetSpace控件的結果存在數(shù)據(jù)庫的TEXT字段中。表樣的格式是 MS EXCEL 的HTML格式，由Microsoft Office Web Components中的SheetSpace控件可以直接獲取。

3．如何與數(shù)據(jù)庫連接？

——專門定義一個字段屬性來表示該報表對應的數(shù)據(jù)庫表(table)

4．如何顯示數(shù)據(jù)？

——將報表數(shù)據(jù)從數(shù)據(jù)庫中提取后以XML的格式保存在客戶端，在Microsoft Office Web Components中的SheetSpace控件內顯示，將獲取的報表數(shù)據(jù)填在指定的單元格內。

5．如何知道用戶修改（增加）了報表數(shù)據(jù)？該數(shù)據(jù)如何與數(shù)據(jù)庫表中的字段對應？如何才知道哪些格中的數(shù)據(jù)合起來是數(shù)據(jù)庫表中的一條完整記錄？又怎樣才能知道用戶輸入的數(shù)據(jù)足夠組成一條完整記錄？

——檢測Microsoft Office Web Components中的SheetSpace控件的change事件,將目前單元格的值與原始數(shù)據(jù)比較，不相同則修改原始數(shù)據(jù)，并置修改標志。該數(shù)據(jù)與數(shù)據(jù)庫字段的對應關系根據(jù)公式解釋得來。這樣也就可以知道哪些格中的數(shù)據(jù)合起來是數(shù)據(jù)庫表中的一條完整記錄。對于增加的數(shù)據(jù)，專門設計一個輸入工具，來提示用戶需要輸入哪些數(shù)據(jù)才是完整的。

6．如何保存數(shù)據(jù)？

——對于XML中有修改（增加）標志的數(shù)據(jù)向服務器提交，服務器處理該數(shù)據(jù)再修改數(shù)據(jù)庫中對應的數(shù)據(jù)。

7．如何設計表格樣式？如粗體、下劃線、斜體、小數(shù)字數(shù)、合并表格、刪除表格等等樣式設計操作。單個數(shù)據(jù)顯示的格式如何定義？怎樣定義？定義的結果如何保存？存在哪兒？

——Microsoft Office Web Components中的SheetSpace控件提供了這些操作函數(shù)，將這些函數(shù)以菜單的形式表現(xiàn)在頁面上，提供用戶操作的手段。用戶操作產生的結果保存在表樣中，在表樣保存的時候一起保存在數(shù)據(jù)庫中。

8．數(shù)據(jù)顯示的位置如何定義？怎樣定義？定義的結果如何保存？存在哪兒？又如何填數(shù)據(jù)？

——設計一個公式設計和解釋器，將要顯示的數(shù)據(jù)以公式的形式保存在表樣中，該公式所在的位置就是數(shù)據(jù)要顯示的位置，該公式所在單元格的格式就是數(shù)據(jù)的顯示格式（如字體、顏色等等）。該公式同表樣保存在一起。在顯示數(shù)據(jù)的時候，根據(jù)公式來獲取數(shù)據(jù)，并將其填入單元格中。

9．如何獲取報表數(shù)據(jù)？獲取數(shù)據(jù)的條件如何定義？怎樣定義？定義的結果如何保存？存在哪兒？

——每份報表都定義“查詢條件”屬性，由該屬性來獲取一份完整的報表數(shù)據(jù)內容。該查詢條件直接對應了數(shù)據(jù)庫的字段；該屬性同報表表樣一起保存在數(shù)據(jù)庫中。

10．用戶要新增一張報表，又沒有現(xiàn)成的數(shù)據(jù)庫表對應，該如何讓用戶來設計數(shù)據(jù)庫？數(shù)據(jù)庫又該如何設計？

——設計一個在WEB頁面上設計數(shù)據(jù)庫的工具，讓用戶根據(jù)自己的實際需要來設計數(shù)據(jù)庫結構。

11．用戶如何知道數(shù)據(jù)庫定義的含義？如何知道某個格應該取數(shù)據(jù)庫表中的哪個字段、哪個記錄？

——由于提供了數(shù)據(jù)庫的設計工具，用該工具設計的數(shù)據(jù)庫結構要求必須填寫該字段的標題，即對該字段的含義說明；在用戶定義公式的時候，顯示的不是枯燥的英文字段名稱，而是該字段的標題，便于用戶理解。

12．有些根本不需要單獨建立數(shù)據(jù)庫表來保存的數(shù)據(jù)，又該如何保存？

——將不需要單獨建數(shù)據(jù)庫的報表我們區(qū)分開來，全部存放在一個公共的表(table)中，該表(table)中的數(shù)據(jù)既包含了報表樣式又包含了報表數(shù)據(jù)。

13．報表的數(shù)據(jù)平衡關系設計？又如何定義？定義的結果如何保存？存在哪兒？

——報表的數(shù)據(jù)平衡關系完全用EXCEL的計算公式來實現(xiàn)。該公式同表樣保存在一起。Microsoft Office Web Components中的SheetSpace控件可以支持絕大部分的MS EXCEL的公式。公式的用法和語法同MS EXCEL完全相同。

14．自動計算公式如何實現(xiàn)？又如何定義？定義的結果如何保存？存在哪兒？

——使用MS EXCEL的計算公式來實現(xiàn)，如sum,avg等等，該公式同表樣保存在一起。

15．如何從其它報表中提取數(shù)據(jù)來產生新報表？如何定義？定義的結果如何保存？存在哪兒？

——報表具有一個屬性叫做“取數(shù)程序”，用來從其他的數(shù)據(jù)庫表(table)中提取數(shù)據(jù)插入本報表對應的數(shù)據(jù)庫表 (table) 中。

16．如何定義報表的匯總（由分支機構的數(shù)據(jù)產生總機構的數(shù)據(jù)）？定義的結果如何保存？存在哪兒？

——報表具有一個屬性叫做“匯總程序”，用來從下級機構的報表中匯總數(shù)據(jù)產生本機構的報表數(shù)據(jù)。

17．如何實現(xiàn)數(shù)據(jù)的上報----即數(shù)據(jù)格式的轉換？轉換程序如何設計？如何保存？存在哪兒？

——上報數(shù)據(jù)其實就是數(shù)據(jù)格式的轉換，通過使用XSL可以十分方便的設計出來。該XSL轉換程序以文本文件的形式保存在一個指定的目錄中，文件的名稱與報表一一對應。要產生上報數(shù)據(jù)的時候，將報表數(shù)據(jù)執(zhí)行該轉換后產生成一個文本文件，保存在客戶端機器的用戶指定位置上即可。

一份報表的完整定義保存在數(shù)據(jù)中，該數(shù)據(jù)庫表的結構為：

　


表2：報表定義結構

為了操作的方便，又增加了批量處理的功能，讓用戶可以批量提取數(shù)據(jù)、匯總數(shù)據(jù)，簡化用戶的操作。

報表的全部處理流程就是這樣的：

1．設計數(shù)據(jù)庫定義

2．設計報表樣式

3．插入取數(shù)公式

4．設置查詢條件

5．設計匯總程序

6．設計取數(shù)程序

7．查詢報表

8．匯總報表

9．批量匯總報表

10．提取報表數(shù)據(jù)

11．批量提取報表數(shù)據(jù)

12．生成上報文件

設計效果

好了，單槍匹馬苦戰(zhàn)一個多月，編碼工作終于全部完成了，設計數(shù)據(jù)庫的界面如圖3所示，設計報表的界面如圖4所示。



圖3：數(shù)據(jù)庫設計界面



圖4：報表設計界面

給用戶試用，效果還不錯，幾十份各式各樣的報表全部輕松解決?；侍觳回摗翱唷毙娜?。按照這種方式，本人又用一周的時間設計出了一個圖表設計工具，用戶反應也很好。圖表設計界面如圖4所示。



圖4：圖表設計界面

總結

本文討論了一種行之有效的WEB報表設計工具的實現(xiàn)思想，并將實現(xiàn)。對于需要大量設計報表的用戶，特別是報表格式和數(shù)量經常變化的用戶，使用將非常方便。對于開發(fā)人員，也可以減少大量的工作。