JQGrid - 如何使用內聯編輯？

當用戶在JQGrid上選擇一行時，他應該能夠編輯可編輯的字段，然後按Enter鍵將該行發佈到將更新數據庫的控制器方法。我找不到如何發佈更新的數據來做到這一點。我想將businessUnitId字段和可編輯字段作爲參數發送給控制器mether來執行此操作。這是我的網頁;JQGrid - 如何使用內聯編輯？

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Maintenance 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <fieldset> 
     <legend>Maintenance of Departments and Divisions</legend> 
     <p>Add, edit or delete a department or division: <%: Html.DropDownList("BusinessUnitTypes")%></p> 
     <p>To amend the department or division, select the row, make the change and then press the return key.</p> 
     <table id="list" class="scroll"></table> 
     <div id="pager" class="scroll" style="text-align:center;font-size: 11px;"></div> 
    </fieldset> 
    <!-- "BusinessUnitTypeId", (SelectList)ViewData["BusinessUnitTypes"] --> 
<script type="text/javascript"> 
    $(document).ready(function() { reloadGrid(); }); 

    $('#BusinessUnitTypes').change(function() { 
     $("#list").trigger("reloadGrid"); 
    }); 

    function reloadGrid() { 
     var lastSelectedId; 

     $('#list').jqGrid({ 
      url: '<%: Url.Action("GetBusinessUnits", "BusinessUnit")%>', 
      postData: { 
       businessUnitTypeId: function() { return $("#BusinessUnitTypes option:selected").val(); } 
      }, 
      datatype: 'json', 
      mtype: 'POST', 
      colNames: ['ID', 'Name', 'Fax', 'Email', "Employees"], 
      colModel: [ 
       { name: 'BusinessUnitId', index: 'BusinessUnitId', width: 25, editable: false }, 
       { name: 'BusinessUnitName', index: 'BusinessUnitName', width: 200, editable: true, edittype: 'text' }, 
       { name: 'Fax', index: 'Fax', width: 80, align: 'right', edittype: 'text', editable: true }, 
       { name: 'Email', index: 'Email', width: 200, editable: true, edittype: 'text' }, 
       { name: 'NumberOfEmployees', index: 'NumberOfEmployees', width: 70, editable: false}], 
      rowNum: 20, 
      rowList: [10, 20, 30], 
      pager: $('#pager'), 
      sortname: 'BusinessUnitName', 
      viewrecords: true, 
      sortorder: "asc", 
      caption: "Edit", 
      height: 575, 
      onSelectRow: function (id) { 
       if (id && id !== lastSelectedId) { 
        $('#list').restoreRow(lastSelectedId); 
        $('#list').editRow(id, true); 
        lastSelectedId = id; 
       } 
      }, 
      editurl: '<%: Url.Action("Save", "BusinessUnit")%>' 
     }); 
    } 

</script> 
</asp:Content>

來源

2012-11-15 arame3333

所有editable值和ROWID將被自動*發送至指定editurl如果用戶通過按下回車關鍵保存數據的URL。

在我看來，BusinessUnitId是網格的本地獨特id。您不會發布任何用於填充網格的測試數據。如果填充id的值與BusinessUnitId的值相同，則可以通過自動解決該問題，因爲BusinessUnitId的值將以id的值爲editurl。或者，您可以將key: true屬性添加到BusinessUnitId的定義colModel中。

如果它不能解決您的問題，則可以使用extraparam在保存行時發送其他數據。詳情請參閱the answer。

我建議您另外向網格添加gridview: true選項並將pager: $('#pager')更改爲pager: '#pager'。它會提高性能。

來源

2012-11-15 12:09:38 Oleg

設置關鍵字：true填充正確值的id字段。謝謝你。我也很欣賞你給我的其他建議。 – arame3333

@ arame3333：不客氣！我會推薦你另外使用'$（this）'而不是像''onSelectRow''這樣的jqGrid回調中的$（'＃list'）'。它不僅會使代碼快速一點，而且會讓代碼更易於管理。如果您需要在另一個項目中，您將更容易使用代碼的剪切和粘貼。 – Oleg

JQGrid - 如何使用內聯編輯？

回答

相關問題