2013-02-06 66 views
0

我正在嘗試將JqGrid與WebAPI結合使用。要訪問我們需要設置自定義headers.For例如的WebAPI:向JqGrid添加自定義標題創建/編輯/刪除方法

headers: { 
    'Username': 'Administrator' 
}, 

我能做到這一點通過AJAX加載網格。不過,我想利用JqGrid支持的創建/編輯/刪除。問題是,jqGrid的似乎並沒有讓我頭添加到呼叫:

$("#btnCreate").click(function() { 
    jQuery("#myGrid").jqGrid('editGridRow', "new", { reloadAfterSubmit: true, url: 'htp://localhost/colorfolder/insert' }); 
}); 

你如何添加標題來創建?

我不能添加標題到網格的負載,我甚至嘗試擴展onclickSubmit但無濟於事。

下面是代碼:

<head> 
    <title>htp://stackoverflow.com/questions/6831306/load-local-json-data-in-jqgrid-without-addjsonrows</title> 
    <meta htp-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="htp://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" /> 
    <link rel="stylesheet" type="text/css" href="htp://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" /> 

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="js/jquery.jqGrid.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 
    </script> 

    <script type="text/javascript"> 
     function CallWebAPI() { 
      jQuery.support.cors = true; 
      var webAPIurl = "htp://localhost/colorfolder/list"; 

      $.ajax({ 
       url: webAPIurl, 
       headers: { 
        'Username': 'Administrator' 
       }, 
       contentType: "application/json; charset=utf-8", 
       type: 'GET', 
       dataType: 'json', 
       data: "{}", 
       success: function (data) { 
        GetDataFields(data); 
       }, 
       error: function (x, y, z) { 
        alert(x + '\n' + y + '\n' + z); 
       } 
      }); 
     } 
    </script> 
    <script type="text/javascript"> 
     var lastsel2 

     function GetDataFields(data) { 
      'use strict'; 
      var data = { 
       "page": "1", 
       "records": "3", 
       "rows": data 
      }, 
      grid = $("#myGrid"); 

      grid.jqGrid({ 
       colModel: [ 
        { name: 'FolderID', index: 'FolderID', width: "200" }, 
        { name: 'FolderDescription', index: 'FolderDescription', width: "105"} 
       ], 

       onSelectRow: function (id) { 
        if (id && id !== lastsel2) { 
         jQuery('#myGrid').jqGrid('restoreRow', lastsel2); 
         jQuery('#myGrid').jqGrid('editRow', id, true); 
         lastsel2 = id; 
        } 
       }, 

       pager: '#myGridPageControls', 
       datatype: "jsonstring", 
       datastr: data, 
       jsonReader: { repeatitems: false }, 
       rowNum: 25, 
       viewrecords: true, 
       multiselect: false, 
       caption: "Folder", 
       height: "auto", 
       ignoreCase: true 
      }); 

      $("#btnCreate").click(function() { 
       jQuery("#myGrid").jqGrid('editGridRow', "new", { reloadAfterSubmit: true, url: 'htp://localhost/colorfolder/insert' }); 
      }); 
     } 

     var grid = $("#myGrid");  // your jqGrid (the <table> element) 
     var orgEditGridRow = grid.jqGrid.editGridRow; // save original function 

     var folder = { "Params": "<Filters><FolderTypeID>1</FolderTypeID><FolderDescription>Test</FolderDescription></Filters>" }; 

     jQuery.support.cors = true; 

     $.jgrid.extend({ 
      editGridRow: function (rowid, p) { 
       $.extend(p, { // modify some parameters of editGridRow 
        onclickSubmit: function (formid) { 
         $.ajaxSetup({ 
          headers: { 
           'Username': 'Administrator' 
          }, 
          type: 'POST', 
          data: JSON.stringify(folder), 
          contentType: "application/json;charset=utf-8", 
          success: function (data) { 
           alert("inserting"); 
          }, 
          error: function (x, y, z) { 
           alert(x + '\n' + y + '\n' + z); 
           var alerting = "alert"; 
          } 
         }); 
        } 
       }); 
       orgEditGridRow.call(this, rowid, p); 
      } 
     }); 

     CallWebAPI(); 
    </script> 
</head> 

<body> 
    <table id="myGrid"><tr><td/></tr></table> 
    <div id="myGridPageControls"></div> 
    <input type="button" id="btnCreate" value="Create" /> 
</body> 

回答

0

它應該是作爲一些簡單等爲編輯(也將是刪除sperate電話等)

editData: { ValueName: ValueData }, 
+0

這是發送數據我相信。我正在嘗試向HTTP請求添加自定義標頭,以便對服務進行驗證。 – user1967363

+0

例如,我在CallWebAPI函數中添加了一個頭文件:頭文件:{ '用戶名':'管理員' }我正在嘗試對JQgrid的原生編輯/創建/刪除調用執行相同的操作 – user1967363

+0

也許我不會不明白你想做什麼。你不想傳遞額外的數據到你的控制器?正如你想在你的客戶端發佈的POST中包含額外的數據一樣? – Mark

相關問題