最近做一個小工具，列表顯示頁面準備使用JQuery的UI框架，因爲之前知道有jQWidgets這個框架,所以直接就下載下來使用了,jQWidgets的功能很強大,Demo和文檔也非常詳細,但使用後發現有幾個問題就果斷放棄了使用jQWidgets:
- 頁面加載速度比較慢;
- 當列表字段過多出現橫向滾動條時,拖動滾動條非常卡(在IE下都很卡,Chrome好點);
- 分頁取數稍顯麻煩,也可能是我沒研究透。
經過一番比較選擇了JQueryEasUI，目前最新版本爲1.3.1：
其實是用類似的框架，看看官網的文檔也就OK了，本文是我最近是用JQueryEasyUI的一個總結，也可以讓初使用JQueryEasyUI的朋友少走彎路。
下載引用
下載後解壓的文件目錄如下圖：
- demo：JQueryEasyUI的一些示例頁面，在項目使用可以將該目錄刪除；
- locale：該目錄中是一些本地化文件，用來支持不同的語言，如中文可以引用其中的easyui-lang-zh_CN.js；
- plugins和src：這兩個目錄中是支持JQueryEasyUI各種功能的js文件；
- themes：主題目錄，目錄中有三種主題，default、gray和metro，另外還有一個icons目錄和icon.css，在頁面使用引用icon.css即可。
使用JQueryEasyUI需要引用四個文件，兩個css和兩個js文件：
<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/gray/easyui.css" /> <link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/icon.css" /> <script type="text/javascript" src="../Scripts/jqueryeasyui/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../Scripts/jqueryeasyui/jquery.easyui.min.js"></script>
如果需要使用本地化 還需要引用：
<script type="text/javascript" src="../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js"></script>
JQueryEasyUI Grid的分頁
根據官網的文檔可以很容易的構建Grid，期初我沒有引用本地化文件easyui-lang-zh_CN.js，列表的分頁欄顯示出來是英文的，在網上查閱後得知可以用代碼的方式重新構建分頁欄：
//設置分頁控件 var p = $('#dg').datagrid('getPager'); $(p).pagination({ pageSize: 10, //每頁顯示的記錄條數，默認爲10 pageList: [10, 20, 30, 40, 50], //可以設置每頁記錄條數的列表 beforePageText: '第', //頁數文本框前顯示的漢字 afterPageText: '頁 共 {pages} 頁', displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄' /*onBeforeRefresh:function(){ $(this).pagination('loading'); alert('before refresh'); $(this).pagination('loaded'); }*/ });
後來發現只需要引用本地化文件easyui-lang-zh_CN.js後分頁欄就自動顯示爲中文了。引用本地化文件還可以解決日曆控件格式的問題，所以如果是做中文系統建議還是在頁面中引用本地化文件。
JQueryEasyUI控件的取值
使用JQuery取控件的值很簡單，如下：
$("#CstName").val(); $("#TaskNo").val(),
如果要使用JQueryEasyUI的日曆控件、下拉控件或其他的一些控件，給普通的input、select控件添加一個class即可：
<input id="FeedBackDate" name="FeedBackDate" class="easyui-datebox" maxlength="10" style="width: 150px;" /> <select id="IsKfCl" class="easyui-combobox" name="IsKfCl" style="width:150px;"> <option value=""></option> <option value="是">是</option> <option value="否">否</option> </select>
現在取這些控件的值需要使用下面的方法：
$("#FeedBackDate").datebox("getValue"); $("#IsKfCl").combobox("getValue");
Grid ToolBar的兩種方式
通常在Grid列表控件的上方會添加一些按鈕如：新增、編輯、刪除等，如下面效果：
在JQueryEasyUI中可以使用ToolBar來實現，ToolBar可以在DataGrid初始化時定義，如下：
$('#dg').datagrid({ collapsible: false, fitColumns: true, singleSelect: true, remoteSort: false, sortName: 'RoleName', sortOrder: 'desc', nowrap: true, method: 'get', loadMsg: '正在加載數據...', url: '...', frozenColumns: [[ { field: 'ck', checkbox: true } ]], columns: [[ { field: 'ID', title: 'ID', width: 80, sortable: true }, { field: 'Name', title: '名稱', width: 100,sortable:true } ]], pagination: true, pageNumber: 1, rownumbers: true, toolbar: [ { id: 'btnAdd', text: '添加', iconCls: 'icon-add', handler: function() { $("#name").val(""); add(); } }, '-', { id: 'btnEdit', text: '編輯', iconCls: 'icon-edit', handler: function() { var selected = $('#dg').datagrid('getSelected'); if (selected) { var name = selected.Name; $("#Name").val(name); edit(); } } }, '-', { id: 'btnDelete', text: '刪除', disabled: true, iconCls: 'icon-remove', handler: function() { } } ] }); });
還有一種方法就是將ToolBar單獨定義在div中，然後在DataGrid的初始化時關聯div的ID，首先定義ToolBar的div，ID爲tb：
<!--工具欄--> <div id="tb" style="padding: 5px; height: auto;display:none;"> <div style="margin-bottom: 5px"> <a href="#" class="easyui-linkbutton" iconcls="icon-add" onclick="add()">新增</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" onclick="edit()">編輯-</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" onclick="copyAdd()">拷貝′</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cut" onclick="copyVss()">複製地址·</a> <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="downReg()">下載REG</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" onclick="del()">刪除y</a> <!--查詢區域--> 區域:<input id="seaArea" style="width: 100px" /> 客戶名稱:<input id="seaCstName" style="width: 100px" /> <a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="searchSrcCode()">查詢</a> </div> </div>
在DataGrid的初始化時設置toobar屬性值爲tb：
pagination: true, pageNumber: 1, rownumbers: true, toolbar: '#tb', ...
單獨定義ToolBar個人認爲要靈活些，也會讓JS代碼簡潔些。
Form表單的提交
上面說過了列表的顯示，下面就來講下數據的提交，有兩種方式可以實現：
- 自己組織數據然後用Ajax（GET POST）提交；
- 使用Form表單提交的方式。
我在剛使用的時候是使用的第一種方法：
//保存 function saveFeedBackLog(mode,id) { $.ajax({ type: "POST", dataType: "json", //cache:true, url: "../Ajax/FeedBackLogAjax.ashx?Method=SaveFeedBackLog", data: { FeedBackDate: $("#FeedBackDate").datebox("getValue"), CstName: $("#CstName").val(), TaskNo: $("#TaskNo").val(), FeedBackContent: $("#FeedBackContent").val(), CsZrr: $("#CsZrr").combobox("getValue"), CsYzResult: $("#CsYzResult").val(), IsKfCl: , KfZrr: $("#KfZrr").combobox("getValue"), EndDate: $("#EndDate").datebox("getValue"), KfClDate: $("#KfClDate").val(), Wtyy: $("#Wtyy").val(), Mode:mode, ID:id }, success: function (data) { //..........
當頁面字段比較多的時候會比較麻煩，保存時需要將每個字段的值逐一取出傳送到後臺，編輯時也需要將行中各字段的值逐一取出賦給表單中的控件，後來發現JQueryEasyUI提供Form的Ajax提交的方式，會使代碼精簡很多,而且使用Form表單提交的方式還能用到JQueryEasyUI提供的一些驗證控件。
編輯時賦值給表單
function edit() { var rowData = $('#dg').datagrid('getSelections'); if (rowData.length == 0) { $.messager.alert('提示', '請選擇要編輯的項！','info'); } else if (rowData.length > 1) { $.messager.alert('提示', '只能選擇一項進行編輯！','info'); } else { _mode = "2"; var row = $('#dg').datagrid('getSelected'); openDialog(); $('#fm').form('load', row); _srcCodeManageID = row.SrcCodeManageID; url = "../Ajax/SrcCodeManageAjax.ashx?Method=SaveSrcCodeManage&ID=" + row.SrcCodeManageID+"&Mode="+_mode; } }
保存
//保存 function saveSrc() { $('#fm').form('submit', { url: url, onSubmit: function () { return $(this).form('validate'); }, success: function (data) { if (data =="Success") { $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // reload the user data $.messager.alert('提示', '保存成功!', 'info'); } else if (data=="Error") { $.messager.alert('錯誤', '系統出錯!', 'error'); } } }); }
可以看出第二種方法相比第一種代碼精簡了很多，而且保存時還能用到表單的一些校驗，比如設置必填項、電話、郵件格式等。
當然JQueryEasyUI還有很多其他的控件和功能，有待以後慢慢研究，希望本文對你有所幫助。