jqgrid에서 클라이언트 측 데이터 조작

Question

저는 JQGrid로 약간의 성공을 거두었지만 지금은 데이터를 한 번로드 한 다음 클라이언트 측에서 모든 crud 작업을 수행해야하는 상황에 있습니다. 완전히 붙어있어. 나는 스택 오버 플로우와 구글을 통해 모두 해왔고 단순한 클라이언트 측 jqgrid 연산의 좋은 예제를 찾을 수없는 것처럼 보였다. (틀릴 수도 있지만 공식 jqgrid 워드 프로세서에서 클라이언트 측 항목을 찾을 수 없었다). 은 여기 예제를 활용하는 시도 :

http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm

하지만, 난 여전히 아약스/javaxcript/jQuery로 초보자 해요 그리고 다소 압도적이었고, 난 그냥 내 그리드 기능을 가져올 수 없습니다. 튜토리얼에 대한 팁이나 링크를 정말 고맙게 생각합니다. 내 코드와 내가는 과정에 대해 수집 한 지금까지 다음과 같다 :

내가 내 그리드 있습니다

editSettings = { 
       jqModal: false, 
       reloadAfterSubmit: false, 
       closeOnEscape: true, 
       savekey: [true, 13], 
       closeAfterEdit: true, 
       onclickSubmit: editSubmit, 
       height: 200, 
       width: 400 
      }, 
      addSettings = { 
       jqModal: false, 
       reloadAfterSubmit: false, 
       savekey: [true, 13], 
       closeOnEscape: true, 
       closeAfterAdd: true, 
       onclickSubmit: addSubmit, 
       height: 200, 
       width: 400 
      }, 
     $('#engineerGrid').jqGrid({ 
     datatype: 'json', 
     colNames: ['Engineer Name', 'Engineer Type', '% Utilization'], 
     colModel: [ 
     {name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select", 
     editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select' 
    }, 
     { name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select", 
      editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select' 
     }, 
     { name: 'ut', index: 'ut', width: 125, align: "left", editable: true, sorttype: 'number', formatter: 'number' } 
      ], 
     rowNum: 10, 
     rowList: [5, 10, 20], 
     pager: '#pager', 
     gridview: true, 
     rownumbers: true, 
     autoencode: true, 
     ignoreCase: true, 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: 'desc', 
     loadonce: true, 
     caption: 'Project Engineers', 
     editurl: 'clientArray', 
     url: '@Url.Action("EditProjectEngineerJQGridData","Project",new{projID = Model.projectID})' 
    }).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings); 
}); 

내가 서버에서 JSON 정보를 얻고을하고 내가 가지고 있기 때문에 생각 loadonce : true set json에서 local로 데이터 유형을 전환해야합니다. 이것은 내가 혼란에 빠지기 시작하는 곳입니다. 모든 중요한 기능을 수동으로 작성하고 onclickSubmit으로 링크해야합니까? 그렇다면 누구나 데이터를 올바르게 가져 오거나 설정하는 방법을 설명 할 의향이 있습니까?

addSubmit = function(){ 
       //I think something needs to go here? 
       }; 

편집 :이 보는 사람을 위해 반복 것

생각. 내가 경험이 많지 않기 때문에 이것은 낮은 수준일지도 모르지만 어쩌면 다른 초보자가 평신도의 설명으로부터 도움을받을 수있다. 로컬 데이터로 작업 할 때 양식 편집을 사용할 수 없습니다 (삭제는 제외). 행을 추가/편집하려면 inlineNav를 사용할 수 있습니다. 내가 작동하는 부분은 아래에 있지만, 까다로운 부분이 있지만 로컬 데이터에서 추가/편집/삭제하는 것이 효과적입니다.

 $(document).ready(function() { 
    var myData = [], 
      editOptions = {}, 
      addOptions = {}, 
      lastSel = -1, 
      parameters = { 
       edit: false, 
       editicon: "ui-icon-pencil", 
       add: true, 
       addicon: "ui-icon-plus", 
       save: true, 
       saveicon: "ui-icon-disk", 
       cancel: true, 
       cancelicon: "ui-icon-cancel", 
       addParams: { useFormatter: false }, 
       editParams: {} 
      }, 
      myDelOptions = { 
       onclickSubmit: function (options, rowid) { 
        var grid = $('#engineerGrid'); 
        // delete the row 
        grid.delRowData(rowid);      
        grid.trigger("reloadGrid", [{ page: 0}]); 
        return true; 
       }, 
       processing: true 
      }; 

    $('#engineerGrid').jqGrid({ 
     datatype: 'json', 
     url: '@Url.Action("CreateProjectEngineerJQGridData", "Project")', 
     colNames: ['Engineer Name', 'Engineer Type', '% Utilization'], 
     colModel: [ 
     { name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select", 
      editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select' 
     }, 
     { name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select", 
      editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select' 
     }, 
     { name: 'ut', index: 'ut', width: 125, align: "left", editable: true, formatter: 'number', 
      formatoptions: { decimalPlaces: '0', defaultValue: '20'} 
     } 
      ], 
     rowNum: 20, 
     rowList: [5, 10, 20], 
     pager: '#pager', 
     gridview: true, 
     rownumbers: true, 
     autoencode: true, 
     ignoreCase: true, 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: 'desc', 
     loadonce: true, 
     width: 750, 
     caption: 'Project Engineers', 
     editurl: 'clientArray', 
     onSelectRow: function (id) { 
     //if selected row changed restore values of previously selected row 
      if (id && id !== lastSel) { 
       jQuery('#engineerGrid').restoreRow(lastSel); 
       lastSel = id; 
      } 
      jQuery('#engineerGrid').editRow(id, true); 
     } 
    }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: true }, editOptions, addOptions, myDelOptions); 
    jQuery("#engineerGrid").jqGrid('inlineNav', '#pager', parameters); 
}); 

어쨌든 도움 주셔서 감사합니다!

Answer 1

The demo 내 old answer에서 정말 길고 하드 코어 코드가 포함되어 있습니다. 그것은 내부 매개 변수 processing: true로 노는 것을 기본으로합니다. 초보자에게는 어렵다는 것에 동의하지만, 지금까지 jqGrid는 로컬 양식 수정을 여전히 지원하지 않습니다.

delSettings의 코드 부분이 너무 복잡하지 않습니다. 그래서 당신은 그것을 사용할 수 있습니다. 행을 편집하고 새 행을 삽입하기 위해 인라인 편집을 사용할 수 있습니다. 사용자가 여전히 원래 위치의 모든 데이터를 볼 수 있기 때문에 개인적으로 가장 편한 편집 모드를 찾습니다. 따라서 양식 편집 대신 사용할 수 있습니다. 편집을 위해 사용 된 테이블이 필요하지 않지만 데이터보기의 경우 ondblClickRow 콜백을 사용하여 편집을 시작합니다. 그리드 만 편집하려면 행 선택에서 편집을 시작할 수 있습니다 : onSelectRow. 당신이 navigator toolbar을 좋아하는 경우에

, 당신은 단지 "추가"및 "편집"작업 "삭제"작업 및 inlineNav에 대한 navGrid를 사용할 수 있습니다. 방법 inlineNav은 여전히 ​​비교적 새롭고 아마도 여전히 완벽하지는 않지만 잘 사용될 수 있습니다.

네비게이터 툴바 대신 "편집"및 "del"버튼이있는 추가 열에서 포맷터 : 'actions'를 사용할 수 있습니다. 위의 모든 방법을 취향에 맞게 결합 할 수도 있습니다.

the official demo 페이지에서 모든 방법의 예를 찾을 수 있습니다.