吐槽一次MVC與Jq EasyUI的經曆

MVC在Web開發中的優勢（在TDD方面、邏輯與UI的徹底分離）已無需多言，除此之外個人感覺在給UI提供JSON各式的資料也更加方便。

但是總體上說，在公司的這次MVC經曆最後的感覺還是比較失敗。個人記錄下來在此做個反思，同時希望和大家一起交流，向大家學習。

整體項目如下：

 

(圖1)

首先從以上中， 個人就犯錯了。從整體架構上來說，項目中的授權部分（Accredit ）之前是希望通過AOP的方式進行的，最後和在基礎加上的AOP部分就發生了劇烈的衝突。這是一個非常致命的錯誤！導致只有的AOP上無法進行。

 

 接下來的問題，注意體現就是EasyUI上了。

1、EasyUI資料繫結 

 EasyUI 在統計資料表中比較方便。資料只要有只有配置響應的欄位名稱就可以很方便的進行綁定。個人目前知道有兩種方式：

        方式一、

在頁面的載入的時候，使用datagrid方法進行。如下代碼：

    

               $('#grid').datagrid({ title: '資料列表',
                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函數擷取資料進行綁定。如下：

  <table id="userTable"  toolbar="#toolbar" >
    <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指定：如下代碼： 
 

 

#("userTable").datagrid({ 

/* 前面表格部分同上，在此省略*/

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 id="dg"  toolbar="#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勾選上，代碼如下：

    for (var i = 0; i < result.Total; i++) { 
  
    $(".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>,可以手動輸入。可以使用如下代碼將它動態進行綁定：

 

                   $('#selectUser').combogrid({ 
     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進行資料擷取。

 

                       （圖4）

 由於我這輸入後，需要通過選擇的文本擷取人員的GUID，然後寫入庫，這種方式可以實現，下拉表中如果搜尋到，人員的會自動被選中。也無需單獨處理。