閱讀目錄
簡介
ligerRM V2是基於 ligerui的web應用系統。以權限管理作爲設計重點，引入Northwind作爲主要的數據演示模塊。權限方面，在上一個版本的基礎上面加多了數據權限控制。後臺方面採用dot net 3.5框架開發。
- 系統演示：http://case.ligerui.com
- 前臺插件：jQuery、jQuery.ligerui、jQuery.form.js、jquery.validation
- 數據交互：liger.Data（一個小型的ORM組件）
- 源碼下載：ligerRMV2
演示賬戶：
|
賬戶
|
名字
|
頭銜
|
密碼
|
|
test3
|
錄入員1
|
基礎數據錄入員1
|
1
|
|
test2
|
錄入員2
|
客戶數據錄入員2
|
1
|
|
test1
|
高級演示賬號1
|
高級演示賬號1
|
1
|
|
test4
|
訂單查看員1
|
訂單查看員1 - Sales Representative
|
1
|
|
test5
|
供應商1
|
供應商1 - Exotic Liquids44
|
1
|
系統特色
1，不採用code-behind機制，不使用任何服務器控件，全面將工作放在前臺實現，後臺只處理數據部分。頁面還是用aspx後綴，繼承於統一的頁面基類(爲了方便權限的控制)。
2， 極大得避免代碼冗餘。無論是列表頁面還是明細頁面，你看到的代碼都是極其簡潔的，就算是表單，甚至不需要任何的html代碼，而是定義【有用的信息】，對【佈局】、【數據】有用的 【數據結構】，當然表格、搜索框 都是如此。
3，統一的數據提交/接收接口，所有的數據請求通過ajax實現，經過 handler/*.ashx處理，針對前臺數據請求類型的不同，一共有6個：
ajax.ashx ---- 通用的數據請求入口（表單提交入口、表單加載入口、常用的數據加載入口等等)
grid.ashx ---- 通用的ligerGrid表格數據加載入口
treegrid.ashx ---- 通用的ligerGrid表格樹格式數據加載入口
tree.ashx ---- 通用的ligerTree樹格式數據加載入口
select.ashx ---- 通用的ligerComboBox數據加載入口
validate.ashx ---- 通用的驗證數據驗證入口(針對jQuery.validation remote驗證)
4，完善的數據權限控制機制。除了基本的 (用戶角色) => (模塊功能) 這類的功能權限控制，還在數據請求入口做了一點小動作，根據【當前的用戶信息】和【配置好的數據權限規則】篩選過濾數據。
5，自動的搜索框、自動的表單。 表單和搜索框不再需要一堆複雜冗餘的html，而是定義好字段的信息(字段名、寬度、類型等)就可以自動完成頁面的構造。
6，自動的表格，同樣地表格也只是需要一些配置信息，就可以自動完成。並利用過濾器插件，擁有高級自定義查詢功能，和歷史查詢功能。
系統介紹 - 首頁
帶權限控制的模塊
加載首頁時，系統會根據用戶的信息加載權限許可的菜單模塊：
系統介紹 - 列表頁(配置的搜索框、表格、動態的按鈕(權限控制))
搜索框、表格不再是一堆html拼出來，而是隻定義了與【佈局】和【數據】配置信息的。
操作按鈕是根據當前頁面的權限控制，加載有權限許可的操作按鈕。
具體的做法是判斷頁面的MenuNo(菜單唯一編碼)，根據MenuNo和當前用戶信息加載權限許可的按鈕,MenuNo的獲取規則：
優先級一：如果頁面定義了ID爲“MenuNo”的隱藏域，那麼讀取這個隱藏域的值，比如：<ipnut type="hidden" id="MenuNo" value="OrderManageOrders" />
優先級二：根據頁面URL的QueryString，Name爲MenuNo的值
優先級三：根據頁面URL進行匹配，/OrderManage/Orders.aspx，MenuNo就是OrderManageOrders
界面效果：
相關代碼：
搜索框表單元素並不是都以文本框的形式，而是支持日期、下拉框等等類型，這些編輯器是可以擴展的，理論上是通用的。比如發貨城市，可以配置爲下拉框選擇：
display: "城市", name: "ShipCity", newline: true, labelWidth: 100, width: 220, space: 30, type: "select", cssClass: "field", options:{
url: "../handler/select.ashx?view=Orders&idfield=ShipCity&textfield=ShipCity&distinct=true"
}
系統介紹 - 明細頁(自動創建表單、表單自動加載、表單提交)
表單應該包括三個部分,表單結構、表單數據、表單提交 ：
表單結構：爲了樣式的統一，代碼的簡潔，表單同樣也是通過“配置”出來的（利用了ligerForm插件）
表單數據：通過指定一個視圖/表名、主鍵字段名、主鍵值加載到一條記錄以後，利用JS訪問每一個屬性加載到相應的控件上面，並更新控件的樣式。
表單提交：利用jquery.validate做表單驗證，利用jQuery.form.js做ajax提交數據
說明兩點：
1，更新控件的樣式：表單的文本框、下拉框都是用ligerui內置的表單元素組件，這些組件都有updateStyle方法，就是當值改變時，界面上面沒有及時反應，可調用這個方法
2，表單提交的統一入口是ajax.ashx，我們會傳入type和method，利用反射的機制找到相應的方法，將請求的數據(Request.Form)傳給那個方法。比如增加訂單的簽名：AjaxResult AddOrders(NameValueCollection form)
界面如下：
系統介紹 - 菜單/按鈕
菜單的編輯保存，採用表格【行編輯】模式，並且支持提交前驗證，圖標在dialog中選取，使得操作更加簡單。
按鈕的編輯模式同菜單一樣，採用表格的【行編輯模式】。對應字段信息不多的，我也比較推薦這種方式，而不是再打開一個頁面。
如果需要全表格同時編輯，那麼可以採用表格的【單元格編輯模式】，比如系統中【訂單編輯頁-訂單明細表格】
系統介紹 - 權限中心
設計思想同上一個版本一樣，採用 【用戶】、【角色】 =》 【模塊】、【功能】 的權限控制。不清楚的朋友可以參考我之前的一篇介紹：《通用權限管理設計 之 數據庫結構設計》
在界面上僅僅只是用了一個頁面，就完成了全部的權限控制，操作很簡潔。設計規則上，角色可以授權權限許可。而用戶，是在角色的基礎上面，單獨設置爲許可、或者禁止。
可以單獨給用戶設置權限（許可或者禁止）
系統介紹 - 數據權限
這個版本新增的功能，可以在功能權限(上面提到的)的基礎上進一步的權限控制擴展，比如銷售員只能查看到自己的銷售訂單。
使用了ligerFilter過濾器插件，這是一個通用條件查詢組件。可以自定義編輯器的類型，如下圖選擇角色的下拉框。
下圖是編輯頁面,定義了數據權限規則：【訂單查看員只能查看自己的】、【訂單管理員和演示角色可以看到全部的】。
管理員永遠不會受到數據權限的限制
注意到有5個可選擇的用戶信息參數，根據業務需求這裏可以擴展
5個用戶信息參數在組織最終的數據庫執行語句時將會返回以下的匹配關係，這裏是可以很好地擴展的。
數據權限的限制總是：｛字段名 條件 允許值｝
下圖列出了訂單表的所有字段，並且加入幾個用戶參數方便做權限的具體分配。
利用ligerFilter編輯器可自定義的特性，這裏當前用戶信息可以在下拉框中選擇，你甚至可以改成在彈出窗口中選擇。
系統介紹 - 字段權限
如果說數據權限是對功能權限在縱向的擴展，那麼字段權限就是在橫向的擴展。可以禁止指定用戶/角色 對某些字段的訪問，這個功能同樣是本版本增加的：
系統介紹 - 下拉框應用細節
下拉框在系統中的應用都很經典，比如下拉框樹，下拉框表格，下拉框在彈出窗口中選取數據。這裏介紹幾個應用的細節
用戶在部門樹中選擇：
實則上系統針對下拉框選取數據的各種情況都通用化了，只需要簡單的配置信息就可以實現在指定數據源中選擇,比如上圖，只需要這樣配置：
上圖是下拉框樹的實例，再看看普通下拉框的：
這兩種情況都是加載全部數據的，如果下拉框的數據來源很大，我們當然不想在一次性加載全部數據中，而是可以在彈出的、分頁的、可過濾的表格中選取數據，這樣會讓表單的應用變得更加人性化。基於這種需求，在這個系統對下拉框插件中擴展了openSelect方法，只需要指定grid的配置參數，search的配置參數（可選），返回的字段名，就可以快速實現這個應用。可以參考系統中【訂單中選擇客戶】、【產品中選擇供應商】。
Code：
結語
這個版本對於【增刪改】常用的操作封裝得更加徹底，大大強化了客戶端javascript的處理能力，而服務器端只是起到數據處理的作用。
系統中大量使用了grid、tree以及各種表單插件，更大程度地展示了ligerui的很多功能的使用。
還有很多的細節和使用技巧，比如訂單明細編輯表格中引入產品、Tab選項延時加載。都有待你的體驗和建議。
歡迎反饋： http://bbs.ligerui.com