JQGrid - как использовать встроенное редактирование?

Question

Когда пользователь выбирает строку в JQGrid, он должен иметь возможность редактировать редактируемые поля, а затем нажать клавишу Enter, которая выведет строку в контроллер, который будет обновлять базу данных. Я не могу найти, как отправлять обновленные данные для этого. Я хочу отправить поле businessUnitId и редактируемые поля в качестве параметров для контроллера, чтобы это сделать. Это моя страница;

<%@ 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> 

Answer 1

Все editable значения и ROWID будет * автоматически * отправить в URL, указанный editurl если пользователь сохранить данные, нажав Enter ключ.

Мне кажется, что BusinessUnitId является родным уникальным id для сетки. Вы не размещаете никаких тестовых данных, которые вы используете для заполнения сетки. Если вы заполните id с тем же значением, что и BusinessUnitId, проблема может быть решена автоматически, так как значение BusinessUnitId будет равно id значение editurl. В альтернативном варианте вы можете добавить имущество key: true в определение BusinessUnitId в colModel.

Если это не поможет решить вашу проблему, вы можете использовать extraparam для отправки дополнительных данных при сохранении строки. См. the answer.

Я рекомендую вам дополнительно добавить gridview: true к электросети и изменить pager: $('#pager') на pager: '#pager'. Это улучшит производительность.