jqgrid

Question

में सभी संपादित पंक्तियां प्राप्त करें संपादित की गई सभी पंक्तियां कैसे प्राप्त करें?

मेरे पास jqgird है, जहां उपयोगकर्ता सभी रिकॉर्ड्स के चेक बॉक्स को संपादित कर सकते हैं। जब सहेजें बटन क्लिक किया जाता है, तो मुझे यह जानने की ज़रूरत है कि सभी रिकॉर्ड संपादित किए गए हैं, मैं jquery और jqgrid पर नया हूं।

क्या कोई मेरी मदद कर सकता है?

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); 
} 

}; 

एचटीएमएल:

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

अपडेट किया गया:

यहाँ jqgrid और html उपयोग कर रहा है @Justin आपके इनपुट के लिए धन्यवाद, मैं कर रहा हूँ नई JQuery के लिए लेकिन यह हमेशा पाने के लिए अच्छा है चीजें सही हैं :) jqGrid में डेटा पहली बार भरा नहीं है, यह खाली होगा। उपयोगकर्ता को "गो" बटन दबाए जाने के बाद ग्राहक संख्या दर्ज करने के लिए एक खोज इनपुट बॉक्स है, मैं jqgrid में जेसन डेटा भरने के लिए AJAX कॉल कर रहा हूं, डेटा इस [{"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"}] जैसा दिखता है, मुझे यकीन नहीं है कि jsonmap का उपयोग कैसे करें इस तरह के आउटपुट, मैं इसे समझने की कोशिश करूंगा। मैं आपके द्वारा उल्लिखित "सेलडेडिट" विकल्प का प्रयास करूंगा। आपके समय और मदद के लिए धन्यवाद।

Answer 1

यह आपके द्वारा पोस्ट किए गए कोड से स्पष्ट नहीं है कि आप ग्रिड को कैसे भरते हैं। आप किसी भी datatype को परिभाषित नहीं करते हैं, इसलिए डिफ़ॉल्ट मान datatype: 'xml' का उपयोग किया जाएगा और jqGrid url से AJAX प्रति XML डेटा लोड करने का प्रयास करेगा जिसे आपने परिभाषित नहीं किया है और डिफ़ॉल्ट url: "" का उपयोग किया जाएगा। तो jqGrid आपके सर्वर से एक्सएमएल डेटा लोड करने का प्रयास करेगा। मुझे यकीन नहीं है कि यह चाहता है कि आप चाहते थे। क्योंकि आप jsonReader का उपयोग करते हैं, इसलिए आप शायद datatype: 'json' का उपयोग करने की योजना बनाते हैं। यदि आप अपने प्रश्न में परीक्षण इनपुट डेटा शामिल करेंगे तो यह कई चीजों को साफ़ करेगा।

अगली समस्या। आप colModel ('creditCodesPermissions.7' या यहां तक ​​कि 'creditCodesPermissions.-1') की 'नाम' संपत्ति में विशेष वर्णों का उपयोग करते हैं, जिनकी अनुमति नहीं है। इस बात पर निर्भर करता है कि आप डेटा को भरने की योजना कैसे बनाते हैं, आप jsonpmap या xmlmap का उपयोग कर सकते हैं, लेकिन आपको यह केवल तभी करना चाहिए जब यह वास्तव में आवश्यक हो और आप एक्सएमएल/जेएसओएन डेटा के प्रारूप को बदल नहीं सकते। किसी भी तरह से आपको colModel की 'नाम' संपत्ति को 'creditCodesPermissions7' जैसे मानों में बदलने की आवश्यकता होगी। आपको किसी मेटा-कैरेक्टर का उपयोग नहीं करना चाहिए (जैसे! "# $% & '() * +,। /:; < =>? @ [] ^` {|} ~) नाम के एक शाब्दिक हिस्से के रूप में कुछ ग्रिड तत्वों की आईडी के निर्माण के लिए इस्तेमाल किया जाएगा।

इसके अतिरिक्त मैं column templates उपयोग करने के लिए आप की सिफारिश करेंगे। तुम बस की तरह

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

एक वस्तु परिभाषित करना चाहिए तो colModel के अंदर स्तंभों की परिभाषा हो सकता है

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

यह woul डी अपने jqGrid को सरल बनाएं।

एक और छोटी टिप्पणी: loadOnce:true पैरामीटर नहीं हैं। केवल loadonce:true। loadOnce:true पैरामीटर को अनदेखा किया जाएगा।

अपने मुख्य प्रश्न का उत्तर देने के लिए आपको पहले समझने की आवश्यकता है कि ग्रिड डेटा कैसे भरता है।किसी भी तरह से मैं आपको तीन मानक संपादन मोड से किसी भी का उपयोग करने की सलाह दूंगा: इनलाइन संपादन, फ़ॉर्म संपादन के सेल संपादन। आपके मामले में इनलाइन संपादन या cell editing शायद बेहतर होगा। cell editing के उपयोग के मामले में "dirty-cell" कक्षा सेल तत्व (<td> तत्व) में जोड़ा जाएगा और "edited" कक्षा ग्रिड पंक्ति (<tr> तत्व) में जोड़ा जाएगा। तो आप इस तथ्य का उपयोग यह पता लगाने के लिए कर सकते हैं कि कौन से सेल्स उपयोगकर्ता से पंक्तियां बदलती हैं।