Nhận tất cả các hàng đã chỉnh sửa trong jqgrid

Question

Cách nhận tất cả các hàng được chỉnh sửa?

Tôi có theo dõi jqgird, nơi người dùng có thể chỉnh sửa các hộp kiểm của tất cả các bản ghi. Khi nút Lưu được nhấp, tôi cần biết tất cả các bản ghi được chỉnh sửa là gì, tôi là người mới đối với jquery và jqgrid.

Có ai có thể giúp tôi không?

Đây là jqGrid và html sử dụng:

var customerCodesView  = {}; 
customerCodesView.customerCodesView = function() { 

$jq("#customerCodesTable").jqGrid(
     { 
      colNames : ['Cust #','Customer Name', '1', '2','3', '4', '5', '6','7', '8','9', '10', '11', '12', '13', '-1'], 

      colModel : [{name : 'customerNumber',index : 'baseCustomerNumber',width : 55, align :'center'}, 
         {name : 'customerName',index : 'storeName',width : 100, sorttype :'text', align :'center'}, 
         {name : 'creditCodesPermissions.1',index : 'codeOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.2',index : 'codeTwo',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.3',index : 'codeThree',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.4',index : 'codeFour',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.5',index : 'codeFive',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.6',index : 'codeSix',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.7',index : 'codeSeven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.8',index : 'codeEight',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.9',index : 'codeNine',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.10',index : 'codeTen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.11',index : 'codeEleven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.12',index : 'codeTwelve',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.13',index : 'codeThirteen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.-1',index : 'codeMinusOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}} 
         ], 

      pager : '#customerCodesTablePager', 
      rowNum : 1000, 
      loadOnce:true, 
      sortorder : "desc", 
      viewrecords : true, 
      gridview : true, 
      autowidth : true, 
      multiselect : true, 
      jsonReader : { 
       repeatitems : false, 
       root : function(obj) { 
        return obj; 
       }, 
       page : function(obj) { 
        return 1; 
       }, 
       total : function(obj) { 
        return 1; 
       }, 
       records : function(obj) { 
        return obj.length; 
       } 
      }, 
      sortable : true, 
      caption : "Credit Codes" 
     }); 

$jq("form#customerCodesForm").submit(
       function() { 
        var newUrl = resourceURL+"&action=searchCreditCodes&"+ $jq(this).serialize(); 
        $jq("#customerCodesTable").jqGrid("setGridParam", {"url" : newUrl,datatype : "json"}).trigger("reloadGrid"); 
        return false; 
       }); 

$jq(".submit").button({ 
    icons : { 
     primary : 'ui-icon-circle-zoomin' 
    } 
}); 

$jq("#customerCodesTableSave").click(function() { 

    var id = $jq("#customerCodesTable").jqGrid('getGridParam','selarrow'); 
    alert("save"); 
    if (id) { 
     var rowdata = $jq("#customerCodesTable").jqGrid('getRowData', id); 
     var postData = JSON.stringify(rowdata); 

     alert("postdata"+postData); 
    } 
    saveGrid(); 

}); 


function saveGrid() { 
    alert("saveGrid"); 
    var saveCollection = []; 
    //Collect all rows in editmode, the rows to be saved. 
    $.each($jq("#customerCodesTable").getDataIDs(), function (index, id) { 
     var row = grid.getInd(id, true); 
     if (row !== false) { 
      if ($(row).attr('editable') === '1') { 
       saveCollection.push(id); 
      } 
     } 
    }); 
    alert(""+saveCollection.toString() + "length" + saveCollection.length); 
} 

}; 

HTML:

<div id="customerCodes_Form"> 
    <form class="customerCodesForm" id="customerCodesForm" method="post"> 
    <fieldset class="ui-widget ui-widget-content ui-corner-all"> 
     <legend class="ui-widget ui-widget-header ui-corner-all">Permissions by Customer</legend> 
     <div> 
      <span> 
       <label for="customerNumber">Customer Number</label> 
       <input id="customerNumber" name="customerNumber" class=""/> 
      </span> 
      <button class="submit" type="submit">Search</button> 
     </div> 
    </fieldset> 
</form> 
<div id="customerCodesGrid"> 
    <table id="customerCodesTable"><tbody><tr><td></td></tr></tbody></table> 
    <div id="customerCodesTablePager"></div> 
    <div style="float:right;"> 
     <button id="customerCodesTableSave">Save</button> 
     <button id="customerCodesTableCancel">Cancel</button> 
    </div> 
</div> 
</div> 

Cập nhật: @Justin Cảm ơn bạn đã nhập vào của bạn, tôi mới để JQuery nhưng nó luôn luôn là tốt để có được những điều đúng :) Dữ liệu trong jqGrid không được điền vào lần đầu tiên, nó sẽ trống. Có một hộp nhập tìm kiếm để nhập số khách hàng, sau khi người dùng nhấn nút "Go" Tôi đang thực hiện cuộc gọi ajax để điền dữ liệu json vào jqgrid, dữ liệu trông như thế này [{"customerNumber":"64093","customerName":"#9735 WATSONTOWN BILO ","creditCodesPermissions.1":"True","creditCodesPermissions.2":"True","creditCodesPermissions.3":"False","creditCodesPermissions.4":"True","creditCodesPermissions.5":"True","creditCodesPermissions.6":"True","creditCodesPermissions.7":"True","creditCodesPermissions.8":"True","creditCodesPermissions.9":"False","creditCodesPermissions.10":"False","creditCodesPermissions.11":"True","creditCodesPermissions.12":"True","creditCodesPermissions.13":"True","creditCodesPermissions.-1":"True"}], tôi không chắc chắn cách sử dụng jsonmap cho loại đầu ra này, tôi sẽ cố gắng tìm ra nó. Tôi sẽ thử tùy chọn "celledit" mà bạn đã đề cập. Cảm ơn bạn đã dành thời gian và sự giúp đỡ của bạn.

Answer 1

Nó không rõ ràng từ mã mà bạn đăng cách bạn điền vào lưới chứa. Bạn không xác định bất kỳ datatype nào, vì vậy giá trị mặc định datatype: 'xml' sẽ được sử dụng và jqGrid sẽ cố gắng tải dữ liệu XML trên ajax từ url mà bạn cũng không xác định và mặc định url: "" sẽ được sử dụng. Vì vậy, jqGrid sẽ cố gắng tải từ máy chủ của bạn dữ liệu XML. Tôi không chắc chắn rằng nó muốn bạn muốn. Vì bạn sử dụng jsonReader, bạn có kế hoạch có thể sử dụng datatype: 'json'. Nếu bạn sẽ bao gồm dữ liệu đầu vào thử nghiệm trong câu hỏi của bạn, nó sẽ rõ ràng nhiều điều.

Sự cố tiếp theo. Bạn sử dụng các ký tự đặc biệt trong thuộc tính 'tên' của colModel ('creditCodesPermissions.7' hoặc thậm chí 'creditCodesPermissions.-1') không được phép. Tùy thuộc vào cách bạn dự định điền dữ liệu bạn có thể sử dụng jsonpmap hoặc xmlmap có điểm, nhưng bạn chỉ nên thực hiện việc này nếu nó thực sự được yêu cầu và bạn không thể thay đổi định dạng dữ liệu XML/JSON. Trong bất kỳ cách nào, bạn sẽ cần thay đổi thuộc tính 'tên' của số colModel thành các giá trị như 'creditCodesPermissions7'. Bạn không nên sử dụng các ký tự meta (chẳng hạn như! "# $% & '() * +,./:; < =>? @ [] ^` {|} ~) Như một phần chữ của tên vì tên sẽ được sử dụng để xây dựng các id của một số yếu tố lưới.

bên cạnh đó tôi sẽ khuyên bạn nên sử dụng column templates. bạn chỉ cần xác định một đối tượng như

var myCheckBoxTemplate = { 
    width: 40, align: "center", editable: true, edittype: 'checkbox', 
    editoptions: { value: "True:False"}, formatter: "checkbox", 
    formatoptions: {disabled : false} 
}; 

sau đó định nghĩa của các cột bên trong colModel có thể là như

{name: 'creditCodesPermissions1', index: 'codeOne', template: myCheckBoxTemplate} 

Nó woul d đơn giản hóa jqGrid của bạn.

Một nhận xét nhỏ hơn: không có thông số loadOnce:true. Chỉ loadonce:true. Thông số loadOnce:true sẽ bị bỏ qua.

Để trả lời câu hỏi chính của bạn, trước tiên, bạn cần phải hiểu cách dữ liệu lưới được lấp đầy.Trong bất kỳ cách nào tôi sẽ khuyên bạn nên sử dụng bất kỳ từ ba chế độ chỉnh sửa tiêu chuẩn: chỉnh sửa nội tuyến, chỉnh sửa tế bào của chỉnh sửa biểu mẫu. Trong trường hợp của bạn, chỉnh sửa nội dòng hoặc cell editing có thể tốt hơn. Trong trường hợp sử dụng cell editing lớp "dirty-cell" sẽ được thêm vào phần tử ô (<td> phần tử) và lớp "edited" sẽ được thêm vào hàng lưới (<tr> phần tử). Vì vậy, bạn có thể sử dụng thực tế để phát hiện những ô nào từ đó hàng được thay đổi bởi người dùng.