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。

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