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가 자동으로 *됩니다 *이 사용자가 가 Enter 키를 눌러 데이터를 저장하는 경우 editurl에 의해 지정된 URL로 보냅니다.

BusinessUnitId은 그리드 용 기본 고유 id입니다. 그리드를 채우기 위해 사용하는 테스트 데이터는 게시하지 않았습니다. BusinessUnitId과 동일한 값으로 id을 채울 경우 BusinessUnitId 값이 값이 editurl 인 모래이므로 자동으로 해결할 수 있습니다. 또는 BusinessUnitId의 정의에 key: true 속성을 colModel에 추가 할 수 있습니다.

문제가 해결되지 않으면 extraparam을 사용하여 행을 저장하는 동안 추가 데이터를 보낼 수 있습니다. 자세한 내용은 the answer을 참조하십시오.

gridview: true 옵션을 그리드에 추가하고 pager: $('#pager')을 pager: '#pager'으로 변경하는 것이 좋습니다. 성능이 향상됩니다.