雖然沒有註釋，可是勉=仔細看看仍是能夠的

時間  2019-11-19
標籤 雖然 沒有 註釋 可是 仔細 看看 仍是 能夠 简体版
原文   原文鏈接

 

    效果圖以下：javascript

 

    

 

    1、View頁面css

 

    首先，引入easyui的js文件。   html

 

 

[html]  view plain  copy
 
 在CODE上查看代碼片派生到個人代碼片
  1. <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">  
  2. <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css">  
  3. <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/demo/demo.css">  
  4. <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>  
  5. <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>  
  6. <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>  
  7. <link href="../../CSS/index.css" rel="stylesheet" />  

    

 

    其次，是對工具欄和表單的設置。java

    

[html]  view plain  copy
 
 在CODE上查看代碼片派生到個人代碼片
  1. <div id="ContentAreas">  
  2.   
  3.     <div class="easyui-panel" title="查詢頁面屬性" >  
  4.   
  5.          <div id="buttonAreas" style="margin-left: 10px; margin-top: 10px;">  
  6.             <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="append()">添加</a>  
  7.             <a href="javascript:void(0)" id="edit" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="accept() " >保存</a>  
  8.             <a href="#" id="lostFocus" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destory()">刪除</a>  
  9.   
  10.         </div>  
  11.         
  12.   
  13.         <div id="tt" >  
  14.             <table id="dg" class="easyui-datagrid"   
  15.                 data-options="rownumbers:true,  
  16.                     fitColumns:true,  
  17.                     url:'/Properties/QueryData',  
  18.                     pagination:true,  
  19.                     singleSelect:false,  
  20.                     onClickCell: onClickCell,onAfterEdit: onAfterEdit">  
  21.                 <thead>  
  22.                     <tr>  
  23.                         <th data-options="field:'ck',checkbox:true,align:'center'"></th>  
  24.                         <th data-options="field:'QueryId',align:'center',hidden:'true'"></th>  
  25.                         <th data-options="field:'EntityName',align:'center',sortable:true,  
  26.                            formatter:function(value,row){  
  27.             return row.EntityName;  
  28.         },  
  29.   
  30.                                          editor:{  
  31.                                                 type:'combobox',  
  32.                                                 options:{  
  33.                                                 valueField:'EntityName',  
  34.                                                 textField:'EntityName',  
  35.                                                 method:'get',  
  36.                                                 url:'/NonQueryProperties/QueryEntity',  
  37.                                                 required:true,  
  38.                                                 onSelect: function(rec){  
  39.                                                           showEntityDesc(rec.EntityDesc);  
  40.   
  41.   
  42.                             }  
  43.   
  44.                             }  
  45.                             },sortable:true">實體名稱</th>  
  46.                         <th id='aaa' data-options="field:'EntityDesc',align:'center',editor:'text'">實體描述</th>  
  47.   
  48.                         <th data-options="field:'PropertyName',align:'center',editor:'text',sortable:true">屬性名稱</th>  
  49.                         <th data-options="field:'PropertyDesc',align:'center',editor:{type:'text',options:{required:true}}">屬性描述</th>  
  50.                         <th data-options="field:'IsShow',align:'center',editor:{type:'checkbox',options:{on:'Y',off:'N'}},sortable:true">是否顯</th>  
  51.                         <th data-options="field:'IsCondition',align:'center',editor:{type:'checkbox',options:{on:'Y',off:'N'}}">查詢條件</th>  
  52.                         <th data-options="field:'PropertyOrder',align:'center',editor:'text',sortable:true">顯示順序</th>  
  53.   
  54.                         <th data-options="field:'ControlId',align:'center',  
  55.                  formatter:function(value,row){  
  56.                         return row.ControlDesc;  
  57.                         },  
  58.                         editor:{  
  59.                         type:'combobox',  
  60.                         options:{  
  61.                         valueField:'ControlId',  
  62.                         textField:'ControlDesc',  
  63.                         method:'get',  
  64.                         url:'/Controls/QueryAllControls',  
  65.                         required:true  
  66.                         }  
  67.                         }">控件類型</th>  
  68.                         <th data-options="field:'ControlHtmlName',align:'center',editor:'text'">控件HtmlName</th>  
  69.                         <th data-options="field:'ControlHtmlId',align:'center',editor:'text'">控件HtmlId</th>  
  70.                     </tr>  
  71.                 </thead>  
  72.             </table>  
  73.         </div>        
  74.         </div>  
  75. </div>  


    而後，就是編寫js事件了。jquery

    

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到個人代碼片
  1. var editIndex = undefined;//定義編輯列的索引  
  2. function endEditing() {//判斷是否處於編輯狀態  
  3.     if (editIndex == undefined) { return true }  
  4.     if ($('#dg').datagrid('validateRow', editIndex)) {  
  5.         $('#dg').datagrid('endEdit', editIndex);  
  6.         editIndex = undefined;  
  7.         return true;  
  8.     } else {  
  9.         return false;  
  10.     }  
  11. }  
  12. //1.0單擊單元格的時候觸發  
  13. function onClickCell(index, field) {  
  14.     if (endEditing()) {  
  15.         $('#dg').datagrid('selectRow', index)  
  16.         .datagrid('editCell', { index: index, field: field });  
  17.         editIndex = index;  
  18.     }  
  19. }  
  20. //2.0根據類型選擇條件進行查詢  
  21. function doSearch() {  
  22.     //查詢參數直接添加在queryParams中  
  23.     var searchName = $('#txtSearch').val();  
  24.     $('#dg').datagrid('reload', {//從新加載表信息datagrid  
  25.         strCondition: searchName  //參數名稱  
  26.   
  27.     });  
  28. }  
  29.   
  30. //  根據類型選擇條件進行查詢  
  31. function entitySearch(entityId) {  
  32.     $('#dg').datagrid('reload', {//從新加載表信息datagrid  
  33.         strCondition: entityId  //參數名稱  
  34.   
  35.     });  
  36. }  
  37.   
  38. //3.0向後臺提交數據，包括添加和修改  
  39. function onAfterEdit(index, row，value) {  
  40.     var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));  
  41.   
  42.     var controlId = row.ControlId;  
  43.     //得到隱藏的GUID列  
  44.     var queryId = row.QueryId;  
  45.     var entityName = row.EntityName;  
  46.     //alert(entityName);  
  47.     var enQueryProperties = JSON.stringify(row);  
  48.   
  49.     if (row.IsShow == 'N' && row.isCondition == 'Y') {  
  50.         alert("查詢條件必須顯示到前臺頁面");  
  51.         //從新加載表格數據  
  52.         $('#dg').datagrid('reload');  
  53.   
  54.     }  
  55.     else {  
  56.         $.ajax(  
  57.                 {  
  58.                     url: '/Properties/updateQueryProperty',//向後臺提交數據  
  59.                     type: "post",  
  60.                     async: true,  
  61.                     dataType: 'json',  
  62.                     data: { 'enQueryProperties': enQueryProperties'},                      
  63.                     success: function (data) {  
  64.                         if (data == 'true') {  
  65.                             alert("更新成功！");  
  66.                         }  
  67.   
  68.                     }  
  69.                 }  
  70.             );  
  71.     }  
  72.   
  73. }  
  74. //4.0添加按鈕，同時怎加隱藏的GUID列  
  75. function append() {  
  76.     if (endEditing()) {  
  77.         $('#dg').datagrid('appendRow', { QueryId: '' });  
  78.         editIndex = $('#dg').datagrid('getRows').length - 1;  
  79.         $('#dg').datagrid('selectRow', editIndex)  
  80.                           .datagrid('beginEdit', editIndex);  
  81.   
  82.     }  
  83. }  
  84. //5.0刪除事件  
  85. function remove() {  
  86.     if (editIndex == undefined) { return }  
  87.     $('#dg').datagrid('cancelEdit', editIndex)  
  88.                       .datagrid('deleteRow', editIndex);  
  89.     editIndex = undefined;  
  90. }  
  91. function accept() {      
  92.     $('#dg').datagrid('acceptChanges');     
  93. }  


           在這裏，咱們須要注意的是添加和修改後的保存事件，他們響應的是同一個js方法，那就是onAfterEdit，那麼在向Controller提交的時候就會出現問題，如何根據讓兩個不一樣的後臺方法響應同一個事件呢？請看Controller的代碼。ajax

 

 

    2、Controller頁面編程

 

    首先，先看修改後更新的方法。
    json

[csharp]  view plain  copy
 
 在CODE上查看代碼片派生到個人代碼片
  1. public Boolean updateQueryProperty(string enQueryProperties)  
  2.    {  
  3.        #region 定義變量  
  4.        //獲取查詢屬性實體的json  
  5.        string json = Request.Params["enQueryProperties"].ToString();  
  6.        //獲取屬性對應的控件實體  
  7.        string strControlId = Request.Params["ControlId"].ToString();  
  8.        //獲取記錄對應的ID  
  9.        string strQueryId = Request.Params["QueryId"].ToString();   
  10.        #endregion  
  11.  
  12.        #region 反序列化 查詢屬性實體的json 爲屬性實體  
  13.        //反序列化 查詢屬性實體的json 爲屬性實體  
  14.        QueryPropertiesViewModel enQueryPropertiesViewModel = (QueryPropertiesViewModel)JsonConvert.DeserializeObject(json, typeof(QueryPropertiesViewModel));   
  15.        #endregion  
  16.  
  17.        #region 取控件的值  
  18.        //根據控件ID查詢控件實體  
  19.        ControlsViewModel enControlViewModel = controlWCF.QueryControlByID(strControlId);  
  20.   
  21.        //給屬性實體的控件屬性賦值  
  22.        //enQueryPropertiesViewModel.Controls = enControlViewModel;  
  23.        enQueryPropertiesViewModel.ControlsControlId = enControlViewModel.ControlId;  
  24.        #endregion 取控件的  
  25.   
  26.        //判斷strQueryId若是有值，則爲修改實體  
  27.        if (strQueryId != "")  
  28.        {     
  29.            //定義更新標籤  
  30.            Boolean queryIsUpdate = false;  
  31.              
  32.            //調用wcf 接口，更新查詢屬性實體  
  33.            try  
  34.            {  
  35.                //更新查詢屬性實體  
  36.                queryIsUpdate = queryPropertiesServiceWCF.UpdateQueryProperties(enQueryPropertiesViewModel);  
  37.                if (!queryIsUpdate)  
  38.                {  
  39.                    Exception e = new Exception("更新失敗！");  
  40.                }  
  41.                return true;  
  42.            }  
  43.            catch (Exception e)  
  44.            {  
  45.   
  46.                throw new Exception("更新失敗!");  
  47.            }  
  48.   
  49.   
  50.        }else<span style="font-family: KaiTi_GB2312;">{</span>//若是strQueryId爲空值，則說明是添加實體  
  51.            //爲GUID主鍵賦值  
  52.            enQueryPropertiesViewModel.QueryId = Guid.NewGuid().ToString();  
  53.            AddEntity(enQueryPropertiesViewModel);//執行添加操做  
  54.            return true;  
  55.        }          
  56.    }  


             從上面更新的方法能夠看出，updateQueryProperty接收的是編輯行整行的數據，咱們區分是編輯單元格仍是編輯新添加的一行能夠經過判斷該編輯行的主鍵列是否爲空值來獲得結論，若是主鍵是空值，那個編輯行必定是新添加的一列，若是主鍵有值，那就就是在原來的單元格上的修改操做。app

 

    下面是添加的操做：async

    

[csharp]  view plain  copy
 
 在CODE上查看代碼片派生到個人代碼片
  1. public bool AddEntity(QueryPropertiesViewModel queryViewModel)  
  2. {  
  3.     bool addIdSuccess = false;  
  4.     try  
  5.     {  
  6.          queryViewModel.QueryId = Guid.NewGuid().ToString();  
  7.          queryViewModel.ControlHtmlId = queryViewModel.PropertyName;  
  8.          queryViewModel.ControlHtmlName = queryViewModel.PropertyName;  
  9.          if (queryPropertiesServiceWCF.AddQueryPropertiesy(queryViewModel)!=null)  
  10.          {  
  11.              addIdSuccess = true;  
  12.          }  
  13.     }  
  14.     catch (Exception e)  
  15.     {  
  16.           
  17.         throw e;  
  18.     }  
  19.     return addIdSuccess;  
  20. }  

 

 

    至此，便完美收工了。

 

    總結：對行內編輯的EasyUI一直很感興趣，此次終因而接觸到了，很開心；可是中間的添加和修改兩個事件着實困惑了我好幾天的時間，剛開始是理不清思路，由於咱們的代碼是從師姐那裏拷過來的，就順着她的思路往下走，把本身給繞了進去。後來仍是打算本身從頭把這裏塊知識理清楚，找來了行內編輯的EasyUI的Demo，用FireBug一步一步的調試，而後再某個即將入眠的晚上，終於茅塞頓開了。這仍是說明那個問題，編程思路真的很重要，有了清晰的邏輯思路，你的工做就完成90%了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程