ASP.NET Aries 入門開發教程6：列表資料表格的格式化處理及行內編輯

標籤：asp.net aries   aries   aries開發架構   

前言：

為了趕進度，周末也寫文了！

前幾篇講完查詢方塊和工具列，這節講表格式資料相關的操作。

先看一下列表：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118210730388-453414656.png" />

接下來我們有很多事情可以做。

1：格式化 - 索引值的翻譯

對於“啟用”列，已經配置了格式化 #是否，已經可以看到效果了。

對於分類ID列，通常顯示的是分類名稱，而不是ID值。

可是分類名稱不在文章表裡，在文章分類表，怎麼關聯格式化呢？

我們有文章分類表：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211205967-1432706202.png" />

所以我們寫個下拉配置：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211429232-815529123.png" />

然後在配置表頭裡把它配置上：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211532904-1262194636.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211602373-1329308014.png" />

PS：通過自訂語句來翻譯下拉項的注意事項：

1：翻譯項的數量在100以下，至少也是在可以預見的數量級。2：如果無法預知數量級，則應採用自訂視圖語句，在資料呈現的時候直接就是名稱。

1.1 自訂視圖語句：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118225145138-1152910989.png" />

建立V_xxx.sql檔案在SQLCode目錄下，檔案在可以隨意放，但檔案名稱不能出現重複。

sql裡事先關聯好表，取值出文章分類的名稱。

接著：html中的代碼：

 var dg = new AR.DataGrid("V_ArticleList", "Article", "grid");

把objName參數寫為檔案的名稱即可。

2：格式化 - 自訂JS函數

對于格式化，除了配置#XXX來格式化索引值對之外，也可以自訂JS。

系統預設寫了3個函數用于格式化：

stringFormatter ： 長度太長時，顯示成...

dateFormatter ：顯示成日期

boolFormatter ：顯示成Checkbox

樣本：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118212209935-784728165.png" />

定義了showAries函數，把它配置表標題列裡：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118212317545-2064859886.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118212343638-1091497353.png" />

3：格式化 - 索引值對的二次格式化

如果格式化裡用了#XXX配置（就沒辦法自訂寫JS），然後希望二次格式化呢？

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118213327513-2103766474.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118213352201-1607903779.png" />

4：樣式格式化

定義一個樣式函數：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118223503529-1773668578.png" />

把樣式函數配置到配置表頭：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118223557201-1013184707.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118223619732-1476037730.png" />

樣式的格式其實是處理<td style="樣式">內容</td>中的樣式。

這個函數後期可能會考慮取消，因為同樣的效果，格式化的功能也能完成如：

格式化返回："<div style="width:100%;background-color:#ffee00;color:red;">value</div>"

5：取消寬度自適應

預設，列表的寬度是自適應的，這對於不同的解析度，可以適合不同的顯示器需求。

但有一種情況下，我們希望取消寬度自適應（自適應沒有捲軸）：當列很多的時候。

控制EasyUI的fitColumns即可。

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118213839373-457570339.png" />

6：行內編輯 - 開啟：

如果只是簡單的表操作，開啟行內編輯是最省事的做法：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214309076-1707910871.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214356248-993880122.png" />

因為配置了格式化，所以被格式化的會變成下拉的效果。

7：行內編輯 - 指定可編編輯的列：

在配置表頭的編輯項裡勾選即可：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214706857-2079650427.png" />

8：行內編輯 - 新增指定預設值

預設點添加按鈕時：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214955810-1772774011.png" />

比如對分類和標題指定預設值：

PS：為了相容Oracle（預設列表的列頭和資料的欄位名是統一轉小寫處理的）

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118215155748-148076195.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118215235013-1000468569.png" />

9：行內編輯 - 通過某列的值決定其它列的值：

比如當分類的選擇的不同，標題的內容為：分類名稱+標題。

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118222826935-973953708.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118222837888-701557355.png" />

10：行內編輯 - 新增跳到自訂頁面處理：

這個回到了上一篇：ASP.NET Aries 入門開發教程5：自訂欄表頁工具列區 中的&ldquo;其它1："項的內容。

11：主從表：

EasyUI支援主從表，給出思路：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118230800201-2041164127.png" />

效果：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/17408/201611/17408-20161118230840951-721703601.png" />

總結：

這節主要講兩個核心：格式化、行內編輯。

下一節介紹列表的主鍵操作區。

ASP.NET Aries 入門開發教程6：列表資料表格的格式化處理及行內編輯