主要更新:
1:升級處理機制(js請求由同步變更為異步)
2:優化前端JS:包括API和配置方式。
3:增加InputDialog功能。
4:增遠遠程驗證功能。
5:優化權限安全機制。
6:增加一次請求多個方法的功能。
7:優化支持文本數據庫(為了演示Demo,節省我服務器的資源)
從舊版本升級的注意事項:
Config_Grid表的字段變更:
viewname字段,變更為Rules,長度為250。
MergeIndexed,改名為:MergeIndex。
開源地址:
GitHub:https://github.com/cyq1162/Aries
Demo演示:http://aries.cyqdata.com/login.html (Demo掛回了美國的VPS【少數用戶訪問可能出現網絡慢的問題】,同時用上了文本數據庫)
JS API通用設計思維介紹:
1:名稱空間:
AR.DataGrid:操作表格和樹形表格(需要實例化)。
AR.Upload:操作文件上傳(需要實例化,如:導入按鈕(點擊的時候彈出上傳Excel文件功能))。
AR.Form:操作表單頁面(如普通的編輯或新增頁面)。
AR.Combobox:操作下拉框對象。
AR.Utility:通用工具類:如AR.Utility.Ajax類就在這里面。
AR.Global:全局對象。
2:通用事件與屬性:
1:對象(包括按鈕)都有$target,獲取JQ對象。
2:對象(包括按鈕)都有isHidden屬性,可以按鈕顯示或隱藏。
3:對象(包括按鈕)都有三個事件(不管是按鈕還是對象的初始化):
onBeforeExecute
onExecute(默認都執行這個)
onAfterExecute
處理時,根據業務,找到對應的對象,處理該事件即可。
4:有些對象有Items屬性(dg.Search.Items、dg.PKColumn.Items、AR.Global.DG.Items)
5:有些對象有add方法。
AR.DataGrid 簡單介紹:
1:支持類型(普通表格(datagrid)和樹形表格(treegrid)):
2:示例代碼:
var dg=new AR.DataGrid(objName,tableName,id,type);
//這里可以控制參數。
dg.bind();//綁定表格
3:呈現的效果:
或者是:(樹形菜單默認是通過右鍵菜單控制操作)
4:表格常用內部對象:
1:dg.ToolArea:包括搜索(Search)和工具條(ToolBar)。
2:dg.Search:搜索區
3:dg.ToolBar:按鈕工具條
4:dg.PKColumn:主鍵列區
5:dg.HeaderMenu:列頭右鍵菜單
6:dg.ContextMenu:行數據的右鍵菜單
5:前端JS API編程示例(結合通用對象通用事件,很容易知道在哪處理你要擴展的事件):
比如:你想在點擊查詢追加條件,那么代碼就是:
dg.Search.BtnQuery.onBeforeExecute=function(para){在這里追加條件。}
比如:你想隱藏重置按鈕,那么代碼是:
dg.Search.BtnReset.isHidden=false;
比如:你想給查詢條件某個框賦值,那么代碼是:
dg.Search.onAfterExecute=function(para){dg.Search.Items["列名"].val(123);};
也可以在頁面加載后處理:
dg.options={
onLoadSuccess:function(){dg.Search.Items["列名"].val(123);}
}
其它細節,在源碼Demo里有介紹,這里就點到為止了。
表單:Input相關的配置介紹:
1:遠程驗證數據是否存在:
<input name="UserName" class='easyui-validatebox' data-options="validType:'exists[UserName]'" />
效果:(框架內部隱式的條件參數包括:頁面傳遞的id,AR.Form.tableName)
2:InputDialog
<input name="F4" dialog="Demo_TestA" multiple="true" editable="true" />
單選效果:(第一次運行時,需要配置下表頭,隱藏不需要呈現的列,然后調一個搜索框出來)
多選效果:
選擇后,是個下拉,還可以再小操作:
3:關於下拉框的具體配置,在Demo里有詳細,所以不詳說,只上一張圖:
配置表頭的配置規則(即由viewname變名的Rules字段)
效果:
本配置用於控制搜索區,目前支持$1和$2配置,規則為:
$1:{}處理非下拉:
如果是日期或數據,默認變成區間查詢(如上圖中的F4字段配置),即默認clone:true,示例配置:
$1:{title:"my title",width:200,clone:false}
$2:{} 處理下拉:
可設按鈕寬度,是否多選,是否選擇,是否呈現請選擇,是否選擇時引發查詢,示例配置:
$2:{width:200,height:30,isQuery:false,mutiple:true,defaultitem:false}
AR.Utility.Ajax:一次請求多個方法,返回結果合集:
框架里的示例代碼:
$Core.Utility.Ajax.post("GetInitConfig,GetKeyValueConfig", null, null, null, null, function (result) { $Core.Global.Variable = result.GetInitConfig; $Core.Global.Variable.isLoadCompleted = true; $Core.Global.Config = result.GetKeyValueConfig; });
結果集按方法組合成Json返回。
其它:參考框架Demo,或/Web/SysAdmin/系統系統功能的用法:
總結:
1:本版本親自操刀前端API(之前版本的前端是交另一個同事編寫)。
由於操刀前端,最近每天都折騰到深夜3-4點:
2:提升了性能(之前的同步導致界面1-2秒空白的卡,速度體驗感不好)。
3:提升了安全性(之前版本有一定的權限安全問題)。
4:增強前端使用體驗。