2013-02-06 70 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

相关问题