क्लाइंट पर मोडल फॉर्म का उपयोग करके jqGrid में नई पंक्ति जोड़ना केवल

Question

कई समस्याएं हैं जो मेरी समस्या को हल करने के बहुत करीब हैं लेकिन दर्जनों और दर्जनों प्रश्नों के बारे में मैंने जो कुछ भी डाला है, वह बिल्कुल सही नहीं है, मैं करने की कोशिश कर रहा हूँ। हालांकि मैंने लगभग एक ही प्रश्न को उत्तर के बिना पूछा है। मैंने विकल्पों और कार्यों के इतने सारे संयोजनों का कोई फायदा नहीं लिया है।

मैं jqGrid में इनपुट किए गए मानों के साथ एक नई पंक्ति जोड़ने के लिए मोडल फॉर्म का उपयोग करना चाहता हूं लेकिन मैं इसे सबमिट करने पर सर्वर पर पोस्ट नहीं करना चाहता हूं। मैं अंततः सर्वर पर पोस्ट करना चाहता हूं लेकिन क्लाइंट उपयोगकर्ता ने मोडल फॉर्म से जोड़े गए पंक्तियों पर अतिरिक्त संपादन (यदि आवश्यक हो) के बाद ही किया है। मैं नहीं चाहता कि किसी भी पंक्ति को दूरस्थ डेटाबेस में सहेजा जाए जब तक कि क्लाइंट ने कुछ संपादन नहीं किए हैं जो बदले में अन्य कॉलम को गतिशील रूप से अपडेट करते हैं। एक बार मूल्यों की एक निश्चित स्थिति मान्य हो जाने के बाद एक सहेजें बटन प्रदर्शित होता है और ग्रिड पंक्ति सर्वर पर पोस्ट की जा सकती है। जब तक यह मान्य स्थिति पूरी नहीं होती है तब तक पंक्तियों को डेटाबेस में सबमिट नहीं किया जाता है। मेरे पास मेरे ऐप में कहीं और उपयोग करने में कई jqGrids हैं जो सबमिट किए गए मोडल फॉर्म के नए पंक्ति डेटा को पोस्ट करते हैं लेकिन यह ग्रिड मैं क्लाइंट के साथ कुछ अलग करने की कोशिश कर रहा हूं जो तुरंत सर्वर को शामिल नहीं करता है। मुझे क्लाइंट उपयोगकर्ता के साथ मूल्यों की प्रारंभिक प्रविष्टि के लिए मोडल फॉर्म का अधिक सहज इंटरफ़ेस पसंद है, फिर आवश्यक होने पर नई पंक्ति के फ़ील्ड को इनलाइन करना संपादित करें, जो मेरे प्रश्न की जरुरत है: क्या मैं फ़ॉर्म को बिना किसी नई पंक्ति के सबमिट कर सकता हूं सर्वर पर कोई पोस्टिंग कार्रवाई हो रही है?

मैंने jqGrid विकी संसाधन में एक उपयोगकर्ता द्वारा की गई एक टिप्पणी में देखा जो कहा कि "क्लाइंटअरे" ग्रिड मोडल फॉर्म सबमिशन विकल्प "editurl:" clientArray "का उपयोग करने के लिए दर्ज मान है कि मोडल फॉर्म" कोई यूआरएल सेट नहीं है "संदेश लेकिन यह अभी भी करता है और ग्रिड में एक नई पंक्ति नहीं जोड़ा जाता है। मैंने ग्रिड डेटाटाइप को स्थानीय" डेटाटाइप: 'क्लाइंटसाइड' के रूप में बनाया है, लेकिन वही "कोई यूआरएल सेट नहीं है" त्रुटि संदेश प्राप्त करें । स्क्रिप्ट एक सामान्य बटन द्वारा मॉड्यूल रूप के लिए बहुत सरल है:

("पैररो, उपयोगकर्ताडेटाऑनफूटर और altRows" विकल्प सारांश फ़ूटर में अद्यतन मानों के हिस्से के रूप में शामिल हैं जो संबंधित है मोडल फॉर्म के माध्यम से जोड़े जाने वाली नई पंक्ति (कोशिकाओं) की कोशिकाओं पर किए गए संपादन)

jQuery("#grid_test").jqGrid({ 
    url:'/grid_test_url.asp?id=' + vId, 
    datatype: "clientSide", 
    colNames: ['ID','Col 1', 'Col 2', 'Col 3','Col 4'], 
    colModel: [ 

     {name:'id',index:'id',width:90,align:"center",editable:true,editoptions:{size:25}, formoptions: {...}, editrules: {...}}, 
     {name:'col1',index:'col1',width:130,align:"right",editable:true,editoptions:{size:25}, formoptions: {}, editrules: {}}, 
     {name:'col2',index:'col2',width:130,align:"right",editable:true,editoptions:{size: 25}, formoptions: {}, editrules: {}}, 
     {name:'col3',index:'col3',width:130,align:"right",editable: true,editoptions:{size:25}, formoptions: {}, editrules: {}}, 
     {name:'col4',index:'col4',width:130,align:"right",editable:true,editoptions:{ size: 25 }, formoptions: {}, editrules: {}} 

    ], 
    rowNum:5, 
    rowList:[5,10,20], 
    pager: '#pgrid_test', 
    toolbar: [true, "top"], 
    editurl: '', //not sure what would go here to block attempted post by the Submit action of the modal form 
    width: 500, 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "asc", 
    multiselect: true, 
    cellEdit: true, 
    caption: "Grid Test Add New Row", 
    footerrow: true, 
    userDataOnFooter: true, 
    altRows: true 
}) 
jQuery("#grid_test").jqGrid('navGrid', '#pgrid_test', { add: false, edit: false, del: false }) 

//append custom button 
$("#t_grid_test").append("<input type='button' class='add' value='Add New Row' style='height:20px; color:green; font-size:11px;' />"); 

$("input.add", "#t_grid_test").click(function() { 
    jQuery("#grid_test").jqGrid('editGridRow', "new", { 
     jqModal: true, 
     savekey: [true, 13], 
     navkeys: [true, 38, 40], 
     bottominfo: "Fields marked with (*) are required. ", 
     addCaption: 'New Row Values', 
     width: 300, 
     dataheight: 200, 
     recreateForm: true, 

     //checkOnUpdate: true, 
     //checkOnSubmit: true, 
     //reloadAfterSubmit: true, 
     closeOnEscape: true, 
     closeAfterAdd: true 
     //clearAfterAdd: true 
    }) 
}); 

मुझे उम्मीद है कि यह उचित रूप से स्पष्ट है। ऐसा लगता है कि बिना किसी सर्वर के पोस्टिंग के मोडल फॉर्म का उपयोग करके एक पंक्ति जोड़ने के लिए यह आसान होना चाहिए, लेकिन मैं समाधान को हल नहीं कर सकता। और अगर मैं उत्तर के लिए दिए गए उचित क्रेडिट के लिए तुरंत आइकन पर क्लिक नहीं करता हूं, तो कृपया मुझे सहन करें, लेकिन जब मुझे पता चलेगा कि क्या क्लिक करना है तो कृपया तदनुसार सलाह दें। :) अग्रिम में बहुत धन्यवाद। जैरी

Answer 1

फॉर्म संपादन का वर्तमान संस्करण स्थानीय डेटाटाइप का समर्थन नहीं करता है। फिर भी थोड़ा और लंबा कोड के साथ कोई भी कार्यान्वित कर सकता है। मैंने कुछ समय पहले the demo बनाया और jqGrid में स्थानीय संपादन समर्थन को लागू करने के सुझाव here पोस्ट किया। अभी तक यह अभी तक लागू नहीं हुआ है, लेकिन आप जो भी चाहते हैं उसे लागू करने के लिए आप मेरे उदाहरण का उपयोग कर सकते हैं।

var lastSel, mydata = [ 
     {id:"1", invdate:"2007-10-01",name:"test", note:"note", amount:"200.00",tax:"10.00",closed:true, ship_via:"TN",total:"210.00"}, 
     {id:"2", invdate:"2007-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"}, 
     {id:"3", invdate:"2007-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"}, 
     {id:"4", invdate:"2007-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"}, 
     {id:"5", invdate:"2007-10-31",name:"test5", note:"note5", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"}, 
     {id:"6", invdate:"2007-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"}, 
     {id:"7", invdate:"2007-10-04",name:"test7", note:"note7", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"}, 
     {id:"8", invdate:"2007-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"}, 
     {id:"9", invdate:"2007-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",closed:false,ship_via:"TN",total:"430.00"}, 
     {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",closed:true ,ship_via:"TN",total:"530.00"}, 
     {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"}, 
     {id:"12",invdate:"2007-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"} 
    ], 
    grid = $("#list"), 
    onclickSubmitLocal = function(options,postdata) { 
     var grid_p = grid[0].p, 
      idname = grid_p.prmNames.id, 
      grid_id = grid[0].id, 
      id_in_postdata = grid_id+"_id", 
      rowid = postdata[id_in_postdata], 
      addMode = rowid === "_empty", 
      oldValueOfSortColumn; 

     // postdata has row id property with another name. we fix it: 
     if (addMode) { 
      // generate new id 
      var new_id = grid_p.records + 1; 
      while ($("#"+new_id).length !== 0) { 
       new_id++; 
      } 
      postdata[idname] = String(new_id); 
     } else if (typeof(postdata[idname]) === "undefined") { 
      // set id property only if the property not exist 
      postdata[idname] = rowid; 
     } 
     delete postdata[id_in_postdata]; 

     // prepare postdata for tree grid 
     if(grid_p.treeGrid === true) { 
      if(addMode) { 
       var tr_par_id = grid_p.treeGridModel === 'adjacency' ? grid_p.treeReader.parent_id_field : 'parent_id'; 
       postdata[tr_par_id] = grid_p.selrow; 
      } 

      $.each(grid_p.treeReader, function (i){ 
       if(postdata.hasOwnProperty(this)) { 
        delete postdata[this]; 
       } 
      }); 
     } 

     // decode data if there encoded with autoencode 
     if(grid_p.autoencode) { 
      $.each(postdata,function(n,v){ 
       postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped 
      }); 
     } 

     // save old value from the sorted column 
     oldValueOfSortColumn = grid_p.sortname === "" ? undefined: grid.jqGrid('getCell',rowid,grid_p.sortname); 

     // save the data in the grid 
     if (grid_p.treeGrid === true) { 
      if (addMode) { 
       grid.jqGrid("addChildNode",rowid,grid_p.selrow,postdata); 
      } else { 
       grid.jqGrid("setTreeRow",rowid,postdata); 
      } 
     } else { 
      if (addMode) { 
       grid.jqGrid("addRowData",rowid,postdata,options.addedrow); 
      } else { 
       grid.jqGrid("setRowData",rowid,postdata); 
      } 
     } 

     if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) { 
      // close the edit/add dialog 
      $.jgrid.hideModal("#editmod"+grid_id, 
           {gb:"#gbox_"+grid_id,jqm:options.jqModal,onClose:options.onClose}); 
     } 

     if (postdata[grid_p.sortname] !== oldValueOfSortColumn) { 
      // if the data are changed in the column by which are currently sorted 
      // we need resort the grid 
      setTimeout(function() { 
       grid.trigger("reloadGrid", [{current:true}]); 
      },100); 
     } 

     // !!! the most important step: skip ajax request to the server 
     this.processing = true; 
     return {}; 
    }, 
    editSettings = { 
     //recreateForm:true, 
     jqModal:false, 
     reloadAfterSubmit:false, 
     closeOnEscape:true, 
     savekey: [true,13], 
     closeAfterEdit:true, 
     onclickSubmit:onclickSubmitLocal 
    }, 
    addSettings = { 
     //recreateForm:true, 
     jqModal:false, 
     reloadAfterSubmit:false, 
     savekey: [true,13], 
     closeOnEscape:true, 
     closeAfterAdd:true, 
     onclickSubmit:onclickSubmitLocal 
    }, 
    delSettings = { 
     // because I use "local" data I don't want to send the changes to the server 
     // so I use "processing:true" setting and delete the row manually in onclickSubmit 
     onclickSubmit: function(options) { //, rowid) { 
      var grid_id = grid[0].id, 
       grid_p = grid[0].p, 
       newPage = grid_p.page, 
       rowids = grid_p.multiselect? grid_p.selarrrow: [grid_p.selrow]; 

      // reset the value of processing option to true 
      // because the value can be changed by jqGrid 
      options.processing = true; 

      // delete selected row/rows (multiselect:true) 
      $.each(rowids, function() { 
       grid.delRowData(this); 
      }); 
      // delete the row 
      //grid.delRowData(rowid); 
      $.jgrid.hideModal("#delmod"+grid_id, 
           {gb:"#gbox_"+grid_id,jqm:options.jqModal,onClose:options.onClose}); 

      if (grid_p.lastpage > 1) {// on the multipage grid reload the grid 
       if (grid_p.reccount === 0 && newPage === grid_p.lastpage) { 
        // if after deliting there are no rows on the current page 
        // which is the last page of the grid 
        newPage--; // go to the previous page 
       } 
       // reload grid to make the row from the next page visable. 
       grid.trigger("reloadGrid", [{page:newPage}]); 
      } 

      return true; 
     }, 
     processing:true 
    }, 
    initDateEdit = function(elem) { 
     setTimeout(function() { 
      $(elem).datepicker({ 
       dateFormat: 'dd-M-yy', 
       autoSize: true, 
       showOn: 'button', // it dosn't work in searching dialog 
       changeYear: true, 
       changeMonth: true, 
       showButtonPanel: true, 
       showWeek: true 
      }); 
      //$(elem).focus(); 
    },100); 
    }, 
    initDateSearch = function(elem) { 
     setTimeout(function() { 
      $(elem).datepicker({ 
       dateFormat: 'dd-M-yy', 
       autoSize: true, 
       //showOn: 'button', // it dosn't work in searching dialog 
       changeYear: true, 
       changeMonth: true, 
       showButtonPanel: true, 
       showWeek: true 
      }); 
      //$(elem).focus(); 
    },100); 
    }; 

grid.jqGrid({ 
    datatype:'local', 
    data: mydata, 
    colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'], 
    colModel:[ 
     {name:'id',index:'id',width:70,align:'center',sorttype: 'int',searchoptions:{sopt:['eq','ne']}}, 
     {name:'invdate',index:'invdate',width:80, align:'center', sorttype:'date', 
     formatter:'date', formatoptions: {newformat:'d-M-Y'}, editable:true, datefmt: 'd-M-Y', 
     editoptions: {dataInit:initDateEdit}, 
     searchoptions: {dataInit:initDateSearch}}, 
     {name:'name',index:'name',editable: true, width:70, editrules:{required:true}}, 
     {name:'amount',index:'amount',width:100, formatter:'number', editable: true, align:'right'}, 
     {name:'tax',index:'tax',width:70, formatter:'number', editable: true, align:'right'}, 
     {name:'total',index:'total',width:120, formatter:'number', editable: true, align:'right'}, 
     {name:'closed',index:'closed',width:110,align:'center',editable: true, formatter: 'checkbox', 
     edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'}, 
     stype: 'select', searchoptions: { sopt:['eq','ne'], value:':All;true:Yes;false:No' }}, 
     {name:'ship_via',index:'ship_via',width:120,align:'center',editable: true, formatter:'select', 
     edittype:'select',editoptions:{value:'FE:FedEx;TN:TNT;IN:Intim', defaultValue:'Intime'}, 
     stype:'select', searchoptions:{value:':All;FE:FedEx;TN:TNT;IN:Intim'}}, 
     {name:'note',index:'note',width:100,sortable:false,editable:true,edittype:'textarea'} 
    ], 
    rowNum:10, 
    rowList:[5,10,20], 
    pager: '#pager', 
    gridview:true, 
    rownumbers:true, 
    autoencode:true, 
    ignoreCase:true, 
    sortname: 'invdate', 
    viewrecords: true, 
    sortorder: 'desc', 
    caption:'How to implement local form editing', 
    height: '100%', 
    editurl: 'clientArray', 
    ondblClickRow: function(rowid, ri, ci) { 
     var p = grid[0].p; 
     if (p.selrow !== rowid) { 
      // prevent the row from be unselected on double-click 
      // the implementation is for "multiselect:false" which we use, 
      // but one can easy modify the code for "multiselect:true" 
      grid.jqGrid('setSelection', rowid); 
     } 
     grid.jqGrid('editGridRow', rowid, editSettings); 
    }, 
    onSelectRow: function(id) { 
     if (id && id !== lastSel) { 
      // cancel editing of the previous selected row if it was in editing state. 
      // jqGrid hold intern savedRow array inside of jqGrid object, 
      // so it is safe to call restoreRow method with any id parameter 
      // if jqGrid not in editing state 
      if (typeof lastSel !== "undefined") { 
       grid.jqGrid('restoreRow',lastSel); 
      } 
      lastSel = id; 
     } 
    } 
}).jqGrid('navGrid','#pager',{},editSettings,addSettings,delSettings, 
      {multipleSearch:true,overlay:false, 
      onClose:function(form){ 
       // if we close the search dialog during the datapicker are opened 
       // the datepicker will stay opened. To fix this we have to hide 
       // the div used by datepicker 
       $("div#ui-datepicker-div.ui-datepicker").hide(); 
      }}); 

UPDATED: jqGrid 4.4.1 के साथ काम करने के लिए कोड परिवर्तन मैं the answer में तैनात

मैं नीचे दिए गए कोड में शामिल हैं।

अद्यतन 2: The answer 4.5.4 के लिए अद्यतन प्रदान करते हैं।

अद्यतन 3: jqGrid का नया 4.7 संस्करण अब स्थानीय डेटा का संपादन करता है।संबंधित संस्करण जो नए संस्करण का उपयोग करता है here है। मुझे formatter: "date" के नए reformatAfterEdit: true विकल्प जोड़ने की आवश्यकता है। Another demo jqGrid 4.6 का उपयोग करता है।

Answer 2

संपादित 4.3.2 के रूप में वहाँ 4.3.2

onclickSubmitLocal = function(options,postdata) { 
.... 
     // !!! the most important step: skip ajax request to the server 
     options.processing = true; 
     return {}; 

साथ 4.3.1

onclickSubmitLocal = function(options,postdata) { 
.... 
     // !!! the most important step: skip ajax request to the server 
     this.processing = true; 
     return {}; 

साथ ग्रिड

के व्यवहार में एक परिवर्तन है अन्यथा ग्रिड यूआरएल त्रुटि वापस