吐槽一次MVC與Jq EasyUI的經歷
MVC在Web開發中的優勢（在TDD方面、邏輯與UI的徹底分離）已無需多言，除此之外個人感覺在給UI提供JSON各式的數據也更加方便。
但是總體上說，在公司的這次MVC經歷最后的感覺還是比較失敗。個人記錄下來在此做個反思，同時希望和大家一起交流，向大家學習。
整體項目截圖如下：
(圖1)
首先從以上截圖中， 個人就犯錯了。從整體架構上來說，項目中的授權部分（Accredit ）之前是希望通過AOP的方式進行的，最后和在基礎加上的AOP部分就發生了劇烈的沖突。這是一個非常致命的錯誤！導致只有的AOP上無法進行。
接下來的問題，注意體現就是EasyUI上了。
1、EasyUI數據綁定
EasyUI 在統計數據表中比較方便。數據只要有只有配置響應的字段名稱就可以很方便的進行綁定。個人目前知道有兩種方式：
方式一、
在頁面的加載的時候，使用datagrid方法進行。如下代碼：
iconCls: 'icon-save',
nowrap: false,
striped: true,
url: '<%Url.Action("LoadMyPostMeetings") %>',
remoteSort: true,
fitColumns: true,
fit: true,
width:'auto',
height:'auto',
idField: 'Guid',
frozenColumns: [[
{ field: 'Id', checkbox: true }
]],
columns: [[
{ field: 'Title', title: '標題', width: 80, align: 'left'},
{
field: 'Time',
title: '時間',
width: 60,
align: 'left',
formatter: function(value) {
var date = (new Date(parseInt(value.substring(value.indexOf('(') + 1, value.indexOf(')')))));
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
},
{
field: 'ImportantLevel',
title: '重要等級',
width: 30,
align: 'left',
formatter: function(value) {
switch (value) {
case 0:
return "普通";
case 1:
return "重要";
default:
return "非常重要";
}
}
},
{ field: 'Address', title: '會議地點', width: 40, align: 'left' }
]],
pagination: true,
rownumbers: true,
onLoadSuccess:function (data){
if(data.Identity) {
for (var i = 0; i < data.rows.length; i++) {
if (data.rows[i].IsCompleted == 1) {
$(".datagrid-body >table tr").eq(i).find("td:last").find("a").eq(1).removeAttr("href").removeAttr("onclick").attr("title", "已關閉");;
}
}
} else {
for (var k = 0; k < data.total; k++) {
$(".datagrid-body >table tr").eq(k).find("td:last").find("a").eq(1).removeAttr("href").removeAttr("onclick").attr("title", "已關閉");;
}
}
}});
這種方式可以在代碼中對所要綁定的數據進行格式化，如以上代碼中的formatter 。
方式二、由表定義需要顯示的字段名稱，datagrid函數獲取數據進行綁定。如下：
<thead>
<tr>
<th checkbox="true" field="Guid" />
<th field="UserName" sortable="true" width="25%">用戶名</th>
<th field="AccountName" sortable="true" width="25%">賬號</th>
<th field="BeginIP" sortable="true" width="25%">起始IP</th>
<th field="EndIP" sortable="true" width="25%">截止IP</th>
</tr>
</thead>
</table>
$('#userTable').datagrid({
title: '賬號列表',
iconCls: 'icon-save',
nowrap: false,
striped: true,
url: '<%=Url.Action("LoadUsers") %>',
remoteSort: true,
fitColumns: true,
fit: true,
idField: 'Guid',
frozenColumns: [[
{ field: 'Id', checkbox: true }
]] }）;
當然 ，像一些EasyUI中設置表格是否分頁等信息也可以在表格的HTML中進行設置，datagrid只獲取JSON格式的數據然后對表格進行綁定。
總結：比較綁定表格的這兩種方式，我發現：
一、第一種雖然需在JS中定義需要顯示的字段數據，但是對數據可以方便的進行格式化。第二種方式，直接在表格中定義需顯示的字段，卻不太好對數據進行格式化。
二、在使用datagrid對表格進行數據綁定的時候， 獲取數據的URL信息（如：url: '<%=Url.Action("LoadUsers") %>'）在以后是不能變更的。這里的不能變更指的是不能換成另外一個Action進行獲取另外的JSON數據對表格進行綁定處理。 當然，如需使用同一個Action進行處理，只是在Action中的參數不同，還是可以這樣使用的。
可能以上第二點中說的不是文字表述的不是特別清楚明了，我這里舉例進行說明.
（圖2）
如上圖，在表格上方有一組操作方法，在其中的【搜索】中，我彈出一個DIV，選中條件然后重新獲取數據對表格進行綁定。這時，獲取到JSON數據后，這樣對表格進行重新綁定：
$("#userTable").datagrid('reload',jsonDatas)
這樣，由于對表格進行reload，又重新指定數據源，表格是顯示了正確數據。但是，若此時，對表格的查詢結果進行分頁，則表格顯示的數據不再是查詢獲取到的數據，而是重新返回到有datagrid中設置的 url: '<%=Url.Action("LoadUsers") %>'在你選定的分頁上的數據。問題就比較悲劇了。
在這點上，EasyUI也有一種解決問題的方式將 你選定的條件發送到Url指定的Controller進行處理，如下：
$("#userTable").datagrid('load',{'key1':'value1','key2':'value2'});
當然，url所指定的Action中需有key1、key2這樣的參數。
2、 為列表指定操作區：
為列表指定操作區，如圖2。同表格的綁定方式一樣，同樣有兩種方式。
方式一、在表格的datagrid方法中中，通過toolbar指定：如下代碼：
/* 前面表格部分同上，在此省略*/
toolbar: ['-', {
id: 'btnSave',
text: '添加',
iconCls: 'icon-add',
handler: function() {
this.href = '<%=Url.Action("AddMeeting1") %>/';
}
},
'-', {
id: 'btnUpdate',
text: '修改',
iconCls: 'icon-edit',
handler: function(msg) {
var row = $('#grid').datagrid('getSelected');
if (row) {
this.href = '<%=Url.Action("AddMeeting1") %>' + "/" + row.Guid;
} else {
$.messager.alert('提示', '請選擇要修改的數據');
return;
}
}
});
方式二、在表格的HTML中使用easyUI中的toolbar指定。如下代碼：
</table>
<div id="toolbar">
使用人姓名：<input type="text" name="searchName" id="searchName" />
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="check()">查詢</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">增加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">刪除</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="ShowImportUsers()">導入用戶數據</a></div>
這兩張方式倒是沒有什么不同，只是在第一種方式中，如果要有一個查詢的輸入框（如下圖三：）：不知如何寫一個input標簽到配置的toolbar中，因此第二種方式更占優勢。
3、在表格的datagrid中設定多少行為已經選中
通常，為了操作批量操作,一般都會在表格第一列顯示一個CheckBox。在通過JS，也很容易地將Checkbox勾選上，代碼如下：
$(".datagrid-body input[type=checkbox]:eq(" + i + ")").attr("checked", "checked");
}
但是千萬別以為這樣操作了就萬事大吉，最重要的問題還有待解決。
在EasyUI中，如果我們將表格手動勾選上以后，是通過$("#userTable").datagrid('getSelections')獲取選中的行的。但是以上將Checkbox勾選上的JS，固然是將Table中的行選中了，但通過$("#userTable").datagrid('getSelections')是獲取不到行的。
如何將EasyUI綁定的表格行通過JS“真正”綁定上呢，？ 答案就是$("#userTable").datagrid('selectRow', i) 。
4、combogrid中的搜索問題：
EasyUI中的combox 也就<Select>,可以手動輸入。可以使用如下代碼將它動態進行綁定：
panelWidth: 155,
idField: 'Guid',
textField: 'UserName',
fit:true,
url: '<%=Url.Action("LoadUserDatas") %>',
columns: [[
{ field: 'UserName', title: '姓名', width: 60 },
{ field: '', title: '部門', width: 100 }
]]});
同datagrid一樣，也是通過url指定的Action進行數據獲取。
由于我這輸入后，需要通過選擇的文本獲取人員的GUID，然后寫入庫，這種方式可以實現，下拉表中如果搜索到，人員的會自動被選中。也無需單獨處理。
浙公網安備 33010602011771號