jqGrid: क्या एंटर दबाए जाने के बजाय टैबबिंग करते समय सेल परिवर्तन करना संभव है?

Question

मेरे पास मेरे ग्रिड में एक साधारण ऑनलाइन संपादन है, और जब मैं टेक्स्टबॉक्स को बंद करता हूं तो मैं परिवर्तन करना चाहता हूं। JqGrid का डिफ़ॉल्ट व्यवहार उपयोगकर्ता को परिवर्तन करने के लिए 'एंटर' दबाए रखने के लिए मजबूर करता है, लेकिन यह हमारे उपयोगकर्ताओं के लिए अंतर्ज्ञानी नहीं है।

alt text http://i32.tinypic.com/e62iqh.jpg

onSelectRow: function(id) { 
     $(gridCoreGroups).editRow(id, true, undefined, function(response) 
     { 
       alert("hello world"); 
     } 
    } 

मैं प्रदान की घटनाओं के माध्यम से अपने रास्ते काम किया है, लेकिन वे सभी 'Enter' दबाकर उपयोगकर्ता है, जो मैं से बचना चाहते हैं की वजह से होता है। क्या कोई ऐसा तार है जिसे मैं तार कर सकता हूं जो उपयोगकर्ता द्वारा इस सेल को बंद करने पर एक क्रिया को ट्रिगर करेगा?

Answer 1

मेरा समाधान इस घटना का पता लगाने के लिए मूल jQuery चयनकर्ताओं और ग्रिड से स्वतंत्र रूप से घटनाओं का उपयोग करना था। मैं ईवेंट को कैप्चर करने के लिए ग्रिड में टेक्स्टबॉक्स पर लाइव और ब्लर इवेंट्स का उपयोग करता हूं। दो घटनाओं एक दूसरे के साथ संयोजन प्रतिशत समर्थन नहीं करता है, इसलिए इस हैक समाधान किया जा रहा समाप्त हो गया:

Simulating "focus" and "blur" in jQuery .live() method

Answer 2

के लिए लाइन में संपादन आप इस के लिए कई तरीके से पूरा किया जा सकता है। , OnSelectRow ट्रिगर का उपयोग संपादित की आवश्यकता को समाप्त इनपुट क्षेत्र के लिए एक onBlur घटना बाँध और बटन बचाने के लिए, कुछ इस तरह करते हैं:

$('#gridId').setGridParam({onSelectRow: function(id){ 
    //Edit row on select 
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur. 
    var fieldName = "Name of the field which will trigger save on blur."; 
    //Note, this solution only makes sense when applied to the last field in a row. 
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){ 
     $('#gridId').saveRow(id); 
    }); 
    }}); 

सभी आदानों है कि एक के भीतर दिखाई दे सकते हैं करने के लिए एक jQuery लाइव ईवेंट हैंडलर लागू करने के लिए

var ids = $("#gridId").jqGrid('getDataIDs'); 
for(var i=0; i < ids.length; i++){ 
    fieldName = "field_which_will_trigger_on_blur"; 
    $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){ 
    $('#gridId').jqGrid('saveRow',ids[i]); 
    }); 
} 

नोट:: .live() ऊपर की तरह साथ कलंक का उपयोग करने से, आप पंक्ति, पाश अपने ग्रिड में पंक्तियों की संख्या फेंक और कुछ इस तरह करते हैं (jqGrid rowId_fieldName के रूप में सभी आदानों लेबल) jQuery 1.4 या पैच पर स्थित है: Simulating "focus" and "blur" in jQuery .live() method

पंक्ति आईडी के साथ सावधान रहें। जब आप पंक्तियों को सॉर्ट करने, जोड़ने और हटाने में आते हैं, तो आप पंक्ति आईडी को iRows या पंक्ति संख्याओं में कनवर्ट करने के लिए कुछ मुश्किल jQuery लिख सकते हैं।

तुम मुझे पसंद कर रहे हैं और आप अलग-अलग सेल संपादित साथ चला गया, तो आप की तरह कुछ के साथ afterEditCell ट्रिगर संशोधित करने के लिए चाहता हूँ:

$('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){ 
    //Modify event handler to save on blur. 
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){ 
     $('#gridId').saveCell(iRow,iCol); 
    }); 
    }}); 

आशा है कि मदद करता है ..

Answer 3

यह सुंदर है भयानक है, लेकिन इसके इस समस्या पर अपना लेते हैं, और थोड़ा आसान और अधिक सामान्य समस्या है - यह प्रोग्राम के रूप में प्रवेश जब आइटम ध्यान केंद्रित :)

 afterEditCell: function() { 
      //This code saves the state of the box when focus is lost in a pretty horrible 
      //way, may be they will add support for this in the future 

      //set up horrible hack for pressing enter when leaving cell 
      e = jQuery.Event("keydown"); 
      e.keyCode = $.ui.keyCode.ENTER; 
      //get the edited thing 
      edit = $(".edit-cell > *"); 
      edit.blur(function() { 
       edit.trigger(e); 
      }); 
     }, 

कि कॉड जोड़े खो देता है प्रेस अपने jqgrid सेटअप कोड के लिए ई।

यह मानता है कि अंतिम संपादित आइटम एकमात्र चीज है। एडिट-सेल माता-पिता टीडी के रूप में।

Answer 4

मुझे पता है कि यह सवाल पुराना है हालांकि उत्तर पुराना है।

एक वैश्विक चर lastsel बुलाया बनाया जाना चाहिए और मैं एक ही मुद्दा था और इसके बाद के संस्करण जवाब करने की कोशिश की jqGrid कोड

onSelectRow: function (id) { 
      if (!status)//deselected 
      { 
       if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode 
        jQuery('#list1').jqGrid('saveRow', lastsel); 
      } 
      if (id && id !== lastsel) { 
       jQuery('#list1').jqGrid('restoreRow', lastsel); 
       jQuery('#list1').jqGrid('editRow', id, true); 
       lastsel = id; 
      } 
     }, 

Answer 5

को जोड़ा गया था।अंत में मैं एक ऐसे समाधान के साथ गया जो उपयोगकर्ता टैब को छोड़ने पर "एंटर" कुंजी दबाता है।

// Call this function to save and unfinished edit 
// - If an input exists with the "edit-call" class then the edit has 
// not been finished. Complete the edit by injecting an "Enter" key press 
function saveEdits() { 
    var $input = $("#grid").find(".edit-cell input"); 
    if ($input.length == 1) { 
     var e = $.Event("keydown"); 
     e.which = 13; 
     e.keyCode = 13; 
     $input.trigger(e); 
    } 
} 

Answer 6

इसके बजाय selectRow उपयोग CellSelect का उपयोग करने का

।

onCellSelect: function (row, col, content, event) { 
    if (row != lastsel) { 
      grid.jqGrid('saveRow', lastsel); 
      lastsel = row; 
     }   
     var cm = grid.jqGrid("getGridParam", "colModel"); 
     //keep it false bcoz i am calling an event on the enter keypress 
     grid.jqGrid('editRow', row, false); 

     var fieldName = cm[col].name; 
     //If input tag becomes blur then function called. 
      $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){ 
       grid.jqGrid('saveRow', row); 
       saveDataFromTable(); 
     }); 

     //Enter key press event. 
     $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){ 
      var code = (e.keyCode ? e.keyCode : e.which); 
      //If enter key pressed then save particular row and validate. 
      if(code == 13){ 
       grid.jqGrid('saveRow', row); 
       saveDataFromTable(); 
      } 
     }); 
    } 

// saveDataFromTable() वह कार्य है जो मेरे डेटा को मान्य करता है।