JQGrid에서 행을 업데이트하는 방법은 무엇입니까?

데이터베이스에서 결과를 표시하기 위해 JQGrid를 사용하고 있습니다. 이제 사용자별로 행을 업데이트해야합니다. 인라인 네비게이터를 사용하려고했습니다. 그리드를 만들기 위해 다음 코드를 사용했습니다.JQGrid에서 행을 업데이트하는 방법은 무엇입니까?

$("#MyGrid").jqGrid({ 
     url: service, 
     datatype: "json", 
     mtype: 'GET', 
     colNames: ['Col1', 'Col2'], 
     colModel: [ 
    { name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: true, sorttype: "text" }, 
    { name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true }, 

     pager: '#pagerLab', 
     rowNum: 1000, 
     rowList: [10, 30, 100, 1000], 
     sortname: 'modified', 
     viewrecords: true, 
     gridview: true, 
     loadonce: true,   
     editurl: '/Service.svc/UpdateGrid', 
    }); 
     jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab", { edit: true, add: false, del: false, search:false }); 
    jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");

은} 지금은 데이터베이스에 사용자의 변경 사항을 저장하는 서버 측 코드를 작성하는 방법을 잘 모르겠습니다. AJAX 지원 웹 서비스를 사용하고 있습니다.

[OperationContract] 
     [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)] 
     public JQGridViewTable MyGrid(string ID) 
     { 
      Reader reader = new Reader(); 

      return Reader.ReadDetails(ID); 
     }

그리고 (데이터 모델) 리더 클래스 내 C# 코드 :

public JQGridViewTable ReadDetails(string ID) 
    {   
      JQGridViewTable table = new JQGridViewTable(); 
    // read data from database and store in table 
     return table; 
    }

내가 도움이 필요 :

그리드를 보여주는 내 웹 서비스 코드

1- 가져 오기 대신 게시를 사용해야합니까? 하나의 기능으로 그리드를 표시하고 편집하고 있음을 주목하십시오. 2 자바 스크립트에 다른 것을 추가해야합니까? 예를 들어 편집 또는 복원 기능? 문서에서는 인라인 편집에서 편집 및 복원 기능을 사용할 수 있지만 인라인 탐색에서는 사용할 수 없습니다. 3- 편집을 위해 웹 서비스에 어떤 형식의 데이터가 전송됩니까? 표시를 위해서는 JQGridView 형식이어야합니다. 4 인라인 네비게이터 기능이 수행하는 작업, 웹 서비스로 전송되는 데이터 및 서버에서 예상하는 데이터를 정확히 모르기 때문에 웹 서비스에서 UpdateGrid 메서드를 구현하는 방법을 모르겠습니다.

전체 웹을 검색했지만 모두 다른 방식으로 사용하고 있습니다. 도움을 주시면 감사하겠습니다.

출처

2013-03-25 user2208346

올바르게 이해하면 서버 측에서 WCF 서비스 (SVC)를 사용하십시오.어떤 버전의 Visual Studio (2012 또는 2010)를 사용합니까? – Oleg

나는 2010 년을 사용하고 있으며, 나의 WCF는 서버 측에있다. – user2208346

은 예제 코드를 기반으로있는 jqGrid는

editurl: '/Service.svc/UpdateGrid'

당신은 당신의 WCF 서비스에이 방법을 만들어야합니다에 게시 작업을 할 것입니다. jqGrid가 호출하고 HTTP Post를 호출하고이 메소드를 호출하여 열 값을 전송합니다.

당신은 당신의 WCF 서비스에 다음과 simalar 작업, 추가 위드합니다

이

[OperationContract] 
    [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json)] 
    public void UpdateGrid(string col1, string col2) 
    { 
      //code to actually do the update to the database 
    }

WCF 작업이 실제로 데이터베이스 테이블의 오른쪽 행의 위치를 눈부시게 반짝 할 것이다 (나는 당신을 수있는 가정입니다 col1 또는 col2에 저장된 값을 기반으로이 작업을 수행하고 업데이트 작업을 수행하십시오.

[default.html을]

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script> 
    <script src="Scripts/jqGrid/grid.locale-en.js" type="text/javascript"></script> 
    <script src="Scripts/jqGrid/jquery.jqGrid.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.10.2.js"></script> 
    <link href="Content/ui.jqgrid.css" rel="stylesheet" /> 
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" /> 

    <script type="text/javascript"> 
     var lastSel; 

     $(document).ready(function() { 

      var service = 'http://localhost:5127/Service.svc/GetData'; 

      $("#MyGrid").jqGrid({ 
       url: service, 
       datatype: "json", 
       height: 255, 
       width: 600, 
       colNames: ['Col1', 'Col2'], 
       colModel: [ 
           { name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: false, sorttype: "text" }, 
           { name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true }, 
       ], 
       jsonReader: { 
        root: "rows", 
        page: "page", 
        total: "total", 
        records: "records", 
        cell: "", 
        repeatitems: false 
       }, 
       rowNum: 1000, 
       rowList: [10, 30, 100, 1000], 
       pager: '#pagerLab', 
       sortname: 'Col1', 
       viewrecords: true, 
       gridview: true, 
       loadonce: true,  
       onSelectRow: function (id) { 
        if (id && id !== lastSel) { 
         $(this).restoreRow(lastSel); 
         lastSel = id; 
        } 
        jQuery(this).editRow(id, true); 
       }, 
       editurl: 'http://localhost:5127/Service.svc/UpdateData', 
       ajaxRowOptions: { contentType: 'application/json; charset=utf-8' }, 
       serializeRowData: function (data) { 
        return JSON.stringify(data); 
       } 

      }); 

      jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab", 
       { edit: false, add: false, del: false, search: false } 
       ); 
      jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab"); 

     }); 
    </script> 
</head> 


<body> 
    <table id="MyGrid"></table> 
    <div id="pagerLab"></div> 
</body> 
</html>

[IService.cs]

[ServiceContract] 
public interface IService 
{ 
    [OperationContract] 
    [WebInvoke(Method="GET", BodyStyle=WebMessageBodyStyle.Bare, ResponseFormat=WebMessageFormat.Json)] 
    jqGridModel<GridListItem> GetData(); 

    [OperationContract] 
    [WebInvoke(Method="POST", BodyStyle=WebMessageBodyStyle.WrappedRequest, RequestFormat=WebMessageFormat.Json)] 
    void UpdateData(string id, string oper, string Col1, string Col2); 

} 

[DataContract] 
public class GridListItem 
{ 
    [DataMember] 
    public string Col1 { get; set; } 

    [DataMember] 
    public string Col2 { get; set; } 
} 

[DataContract] 
public class jqGridModel<T> 
{ 
    public jqGridModel() 
    { 
     this.total = 0; 
     this.rows = null; 
     this.records = 0; 
     this.page = 0; 
    } 

    [DataMember] 
    public int total { get; set; } 
    [DataMember] 
    // this is the property where you store the actual data model 
    public IList<T> rows { get; set; } 
    [DataMember] 
    public int page { get; set; } 
    [DataMember] 
    public int records { get; set; } 
    } 
}

아래

코드 조각은 시작점으로 샘플을 사용하여 내 구현에서 있습니다

[Service.svc.cs]

public class Service : IService 
{ 

    jqGridModel<GridListItem> IService.GetData() 
    { 
     jqGridModel<GridListItem> model = new jqGridModel<GridListItem>(); 
     List<GridListItem> list = new List<GridListItem>(); 
     GridListItem item = new GridListItem() { Col1 = "1", Col2 = "Dog" }; 
     list.Add(item); 

     item = new GridListItem() { Col1 = "2", Col2 = "Cat" }; 
     list.Add(item); 

     model.records = list.Count; 
     model.rows = list; 
     return model; 
    } 

    void IService.UpdateData(string id, string oper, string Col1, string Col2) 
    { 
     //do work here to save the updated data 
    } 
}

출처

2013-03-25 17:09:09 codechurn

답장을 보내 주셔서 감사합니다. 이 메서드를 웹 서비스에 추가했습니다. 필드를 편집 한 후 JQgrid에서 "저장"버튼을 클릭하면 400 개의 잘못된 요청 오류가 발생합니다. 내 자바 스크립트에 다른 것을 추가해야합니까? – user2208346

@ user2208346 전체 예제를 추가했습니다. 나는 이것이 당신을 돕기를 바랍니다. – codechurn

많은 도움을 주셔서 감사합니다. – user2208346

JQGrid에서 행을 업데이트하는 방법은 무엇입니까?

답변

관련 문제