2013年5月29日 星期三

Operating the HTML table like Powerbuilder's DataWindow chapter 0

發想來自我接觸最久的程式語言 Powerbuilder,說真的跳通到其他語言時,會非常懷念它的DataWindow 物件。原因不外乎,它讓資料操作變得很簡單,甚至讓程式設計師變懶了。

但如果開始使用其他語言時,例如現在幾乎都要用網頁來工作,就發現網頁要操作資料真的不是那麼容易,尤其使用AJAX技術時,針對頁面的操作,每個工程師寫出來的方式大相逕庭,閱讀理解就變得重重。
有鑑於此,只好將自己理解datawidnow的部份,將其方法(method)實現到javascript裡面來。
盡力讓畫面表單操作變得簡單一些。
這樣的好處是,使用相同套件,程式碼閱讀起來清爽也易懂,比較容易除錯。

下面簡單介紹一下操作原理,與表格架構,DataWindow會用DW簡稱:
1、原則上一個類DW的架構如下:
<div id="objid">
 <table width="100">
  <tr>
   <th width="48" cn="field1">欄1標題</th>
   <th width="18" cn="field2">欄2標題</th>
   <th width="28" cn="field3">欄3標題</th>
  </tr>
 <table>
</div>
這是一個標準table外面包著一個div層,而這個div層的id就是這個datawindow的名稱(datawindow name),一個DW結構(div)裡面只能有一個table存在。
這個結構很重要,因為接下來所有的操作都會參考這個結構的定義。

2、TH屬性的定義:
cn:欄位名稱,必要的,英數字,其值就是代表了這個欄位的column name。
edit:編輯模式,選擇性,此屬性表示生成的資料可以編輯,其值(編輯模式)有:text / password / date / ddw / lbox。
key:關鍵欄,選擇性,其值為yes / no,yes=開啟編輯模式時,如果是修改的情況下,此欄位資料不可以被編輯。
fmt:顯示格式化,選擇性,其值為int / float ,不帶此屬性表示生成的資料為插入資料原始樣式。
ddw:選擇性,當edit="ddw"時,需指定此ddw屬性,畫面輸入方式呈現下拉式選單,而此下拉式選單的資料來源會以其指定的值向 隱藏資料區 取得。而隱藏資料區則是這個資料表單初始化的時候必須先完成,初始化請參考 retrieveDWC 指令。
lbox:選擇性,當edit="lbox"時,需指定此lbox屬性,畫面輸入方式呈現下拉式選單,而此下拉式選單的資料來源會參考其值="'key1':'value1','key2','value2'" 生成。,lbox值內容,以JSON內容列舉,key 或 value前後都必須加上單引號'。
xls:當畫面表格轉換excel檔案時,指定欄位輸出強制excel格式,選擇性,目前僅支援xls="nf@",此格式禁止excel把類數字自動轉數字(一般轉換數字後有0開頭會消失)
pis:轉出資料使用個資遮罩法,選擇性,值為一字串如 "i,5";這個字串由逗號分隔成兩個參數,參數1= i(間格遮)、r(右方遮)、l(左方遮),參數2=遮前保留字元。
※關於個資遮罩的疑惑:公司於內部網路因為內部需要所以有時後會顯示地址、電話等資訊,但是輸出檔案時就必須小心遮蔽重要識別資訊;但若於公司外部網路時,就必須在資料讀取時就預先遮蔽,亦即畫面也無法看到完整的地址、電話等供識別資訊

3、表/裡結構:
這個跟DW行為相同,當資料直接新增時,遇到有參考列舉選項時,雖然畫面呈現的是列舉選項的文字,但是實際上的值卻是選項的 value。

其次,編輯資料時,畫面上雖然是編輯狀態,但是使用者可以取消讓原本的資料復原。


2013年5月28日 星期二

使用coldfusion將HTML表格輸出成EXCEL檔案(使用者下載)

Coldfusion 的檔案輸出控制,主要有下面兩個指令
<cfcontent><cfheader>
cfcontent 用來告訴瀏覽器等一下要輸出的內容是甚麼格式
cfheader 用來宣告傳輸資料的相關資訊

簡單的輸出測試  saveFileTest.cfm:
<cfsetting enablecfoutputonly="Yes">
<cfcontent type=
"application/vnd.ms-excel; charset=big5">
<cfheader name=
"Content-Disposition" value="attachment;filename=ODR10001234567.xls">
<!--- office Excel Format Structure--->
<cfoutput><html xmlns:x="urn:schemas-microsoft-com:office:excel">
<head>
<meta http-equiv=
"Content-Type" content="text/html;charset=big5">
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>

<!--- this line names the worksheet --->
<x:Name>訂單狀態</x:Name>
<x:WorksheetOptions>

<!--- these 2 lines are what works the magic --->
<x:Panes>
</x:Panes>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->

</head>
<body>

<table border="0" cellpadding="1" cellspacing="2">
<tr>
<th>
客戶編號</th><th>業務員</th><th>出貨員</th><th>訂單日</th><th>訂單號</th><th>訂購人</th><th>批號</th><th>交付日</th><th>交付時間</th><th>應收款</th><th>實收款</th><th>交易狀況</th></tr>
<tr>
<td style=
'vnd.ms-excel.numberformat:@'>00987</td>
<td>
苗小平</td>
<td>
江企財</td>
<td>
2013/05/30</td>
<td style=
'vnd.ms-excel.numberformat:@'>BCDF9876534</td>
<td>
黃疆普</td>
<td style=
'vnd.ms-excel.numberformat:@'>0098765432</td>
<td>
2013/06/25</td>
<td>
11:30</td>
<td>
1200</td>
<td>
1200</td>
<td>
100-success</td>
</tr>
<tr>
<td style=
'vnd.ms-excel.numberformat:@'>00147</td>
<td>
林英蠻</td>
<td>
江企財</td>
<td>
2013/05/30</td>
<td style=
'vnd.ms-excel.numberformat:@'>BCDF98788471</td>
<td>
劉力行</td>
<td style=
'vnd.ms-excel.numberformat:@'>0098765431</td>
<td>
2013/07/01</td>
<td>
13:00</td>
<td>
8477.5</td>
<td>
8477</td>
<td>
50-discount</td>
</tr>
</table>

</body>
</html>

</cfoutput>


首先,使用 cfsetting enablecfoutputonly="Yes" 來壓制不必要的空白輸出,
然後,cfcontent type="application/vnd.ms-excel; charset=big5"
宣告文件為excel類型,且為big5編碼,
接著,cfheader name="Content-Disposition" value="attachment;filename=ODR10001234567.xls"
告訴瀏覽器,這是附件下載的檔案 ODR10001234567.xls
接著用 cfoutput 輸出內容,簡易的excel內容編制可以使用HTML格式,但是需要經過宣告

最開始的 html 到 body 這一段就是讓excel認識下面的html table屬於excel內容編排
中間的<table></table>就是內容編排,你會發現它就是很標準的HTML table 表

注意的是有個 style='vnd.ms-excel.numberformat:@' 宣告,這是讓excel不要過度雞婆把『疑似數字』的內容自動轉成數字,因為會很捆擾的,比竟某些場合的數字是當成字串使用,因為excel轉數字的話會把前面的 0 自動取消掉。

執行這個網頁會直接讓瀏覽器輸出存檔,檔案名稱就是 ODR10001234567.xls(當然儲存時可以改)

如何?簡單吧...