2014-12-19 98 views
2

我正在使用引導程序開發基於Web的應用程序。 我試圖在頁面加載時在我的網格中實現內聯編輯,但是當我單擊網格上的編輯按鈕時,所有單元格都變爲可編輯文本,之後我單擊保存按鈕它顯示我在特定單元格中鍵入的文本但在保存按鈕的按鈕上,我無法調用執行數據庫更新的功能。無法在jqgrid內聯編輯中將編輯的數據傳送到數據庫

這裏是我的代碼:

$(document).ready(function() { 
    var GetUrl = Web_Path + '/Test/TestHandler/GetTestData/' + AjaxHandlerName; 

       jQuery("#jqGrid-container").jqGrid({ 
        url: GetUrl, 
        datatype: 'json', 
        mtype: 'POST', 
        postData: { SearchInfo: function() { return getSearchPostData() } }, 
        colNames: [' ', 'ID', 'Name', 'ContactNo', 'EmpId', 'MailId', 'RoleName'], 
        colModel: [ 
        { name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false, 
         formatter: 'actions', 
         formatoptions: { 
          keys: true, 
          delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback } 
         } 
        }, 
           { name: 'Id', index: 'Id', hidden: true, editable: true }, 
           { name: 'Name', index: 'Name', validation: { required: true }, sortable: true, editable: true, editoptions: { size: "40", maxlength: "50"} }, 
           { name: 'ContactNo', index: 'ContactNo', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} }, 
           { name: 'EmpId', index: 'EmpId', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} }, 
           { name: 'MailId', index: 'MailId', sortable: false, editable: true, editoptions: { size: "40", maxlength: "50"} }, 
{name: 'RoleName', index: 'RoleName', sortable: false } 
    ], 
        jsonReader: { 
         id: 'Id', 
         repeatitems: false 
        }, 
        height: "100%", 
        pager: '#jqGrid-pager', 
        rowNum: 10, 
        rowList: [10, 20, 30], 
        sortname: 'Id', 
        sortorder: 'desc', 
        viewrecords: true, 
        caption: "JQ grid data", 
        loadComplete: function() { 
         var table = this; 
         updatePagerIcons(table);      
        } 
       }); 
}); 

function getSearchPostData() { 
      var searchData = {}; 
      searchData.Id=1; 

      return JSON.stringify(searchData); 
     } 
function updatePagerIcons(table) { 
      var replacement = 
        { 
         'ui-icon-seek-first': 'icon-double-angle-left bigger-140', 
         'ui-icon-seek-prev': 'icon-angle-left bigger-140', 
         'ui-icon-seek-next': 'icon-angle-right bigger-140', 
         'ui-icon-seek-end': 'icon-double-angle-right bigger-140' 
        }; 
      $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() { 
       var icon = $(this); 
       var $class = $.trim(icon.attr('class').replace('ui-icon', '')); 

       if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]); 
      }) 
} 

<div class="row"> 
     <div class="col-xs-12">   
      <table id="jqGrid-container" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all"> 
      </table> 
      <div id="jqGrid-pager"> 
      </div>   
     </div> 
    </div> 

我用jquery.jqGrid.min.js

當我嘗試保存時,無法將數據攜帶到數據庫..請幫助我。

回答

0

您需要使用jqgrid的editurl屬性,它基本上是服務器的控制器URL。當保存動作被觸發時,editurl被調用。

在呼籲editurl以下數據是根據jqgrid documentation發送到服務器,

如何當行被編輯和輸入元素創建我們設定以下規則中的數據組織

  • 表格行變得可編輯屬性=「1」
  • 陣列savedRow(OPTI在網格中)在編輯之前填充值 。這是一個名稱:值對陣列具有附加 對ID:的rowid
  • 隱藏字段中不包含
  • 可編輯元素的id被構造從colModel陣列「的rowid _」 +名稱 。例如,如果我們編輯id = 10的行,並且只有可編輯元素是'myname'(來自colModel),那麼id變成 10_myname。屬性 - -
  • 可編輯元素的名稱從 colModel陣列的名稱構造名稱的行保存後或恢復 可編輯屬性被設置爲「0」,並與 ID的savedRow項= ROWID是刪除

什麼是發佈到服務器?

當數據被髮送到服務器,我們構建對象{}包含(一個或多個):

  • 名稱:值對,其中名稱是在表示的輸入元件 的名稱行(這是所有輸入元件)
  • 另外我們添加了一個對ID:ROWID其中ROWID是 行的id
  • 如果extraparam參數不是空的,我們延伸與 發佈數據
  • 這個數據

因此,您需要設置服務器端以獲取從jqGrid發送的編輯/保存操作的值。