jqGrid एक संपादन योग्य चेकबॉक्स कॉलम

Question

जब jqGrid का उपयोग करते हैं तो आप पृष्ठ लोड पर इसके संपादन योग्य दृश्य में लोड होने के साथ-साथ जब इसे क्लिक किया जाता है तो सेल को कैसे मजबूर किया जाता है?

यदि आप नीचे 'सेल संपादन' सेट अप करते हैं, तो चेक बॉक्स केवल तब दिखाई देता है जब आप सेल पर क्लिक करते हैं।

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, 

cellEdit:true, 

इसके अलावा चेकबॉक्स क्लिक पर, वहाँ सर्वर के लिए एक AJAX पोस्ट भेजने के तुरंत बजाय उपयोगकर्ता दर्ज दबाने पर भरोसा करने के लिए होने का एक तरीका है?

Answer 1

चेक बॉक्स हमेशा क्लिक-सक्षम होने के लिए अनुमति देने के लिए, चेकबॉक्स फ़ॉर्मेटर के disabled संपत्ति का उपयोग करें:

{ name: 'MyCol', index: 'MyCol', 
    editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
    formatter: "checkbox", formatoptions: {disabled : false} , ... 

अपने दूसरे सवाल का जवाब करने के लिए, आप सेटअप करने के लिए चेक बॉक्स के लिए एक ईवेंट हैंडलर, ऐसा है कि जब होगा एक पर क्लिक किया जाता है एक फ़ंक्शन को कॉल किया जाता है, उदाहरण के लिए, सर्वर पर एक AJAX पोस्ट भेजें। शुरू करने के लिए यहां कुछ उदाहरण कोड दिया गया है। आप loadComplete घटना को यह जोड़ सकते हैं:

// Assuming check box is your only input field: 
    jQuery(".jqgrow td input").each(function(){ 
     jQuery(this).click(function(){ 
      // POST your data here... 
     }); 
    }); 

Answer 2

यह एक पुरानी एक है लेकिन देखने का एक बहुत इसलिए मैं यहाँ भी मेरे समाधान जोड़ने का निर्णय लिया है।

मैं देर से बाध्यकारी कार्यान्वयन बनाने के लिए JQuery के .delegate फ़ंक्शन का उपयोग कर रहा हूं जो आपको लोड पूर्ण घटना का उपयोग करने के दायित्व से मुक्त कर देगा।

बस निम्नलिखित जोड़ें:

$(document).delegate('#myGrid .jqgrow td input', 'click', function() { alert('aaa'); }); 

यह देर से हर चेकबॉक्स ग्रिड पंक्तियों पर है कि करने के लिए है कि हैंडलर बाध्य होगा। यदि आपके पास एक से अधिक चेकबॉक्स कॉलम हैं तो आपको यहां कोई समस्या हो सकती है।

Answer 3

मैंने नीचे दिए गए लिंक पर एक पूरा कोड साझा किया था, यदि आप इसकी आवश्यकता है तो आप देख सकते हैं।

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Answer 4

मैं एक ही समस्या थी और मुझे लगता है कि मैं तुरंत चेकबॉक्स क्लिक संभालने के लिए एक अच्छा समाधान पाया लगता है। मुख्य विचार संपादनसेल विधि को ट्रिगर करना है जब उपयोगकर्ता गैर-संपादन योग्य चेकबॉक्स पर क्लिक करता है।

 jQuery(".jqgrow td").find("input:checkbox").live('click', function(){ 
      var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id')); 
      var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td')); 
      //I use edit-cell class to differ editable and non-editable checkbox 
      if(!$(this).parent('td').hasClass('edit-cell')){ 
            //remove "checked" from non-editable checkbox 
       $(this).attr('checked',!($(this).attr('checked'))); 
         jQuery("#grid").editCell(iRow,iCol,true); 
      } 
    }); 

इस के अलावा आप अपने ग्रिड के लिए घटनाओं परिभाषित करना चाहिए,:: यहाँ कोड है

  afterEditCell: function(rowid, cellname, value, iRow, iCol){ 
      //I use cellname, but possibly you need to apply it for each checkbox  
       if(cellname == 'locked'){ 
       //add "checked" to editable checkbox 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked'))); 
          //trigger request 
        jQuery("#grid").saveCell(iRow,iCol); 
       } 
      }, 

      afterSaveCell: function(rowid, cellname, value, iRow, iCol){ 
       if(cellname == 'locked'){ 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell'); 
       } 
      }, 

फिर अपने चेकबॉक्स जब उपयोगकर्ता इस पर क्लिक अनुरोध संपादित हर बार भेज देंगे।

Answer 5

मेरे पास एक सबमिट फ़ंक्शन है जो सभी ग्रिड पंक्तियों को वेबसर्वर को भेजता है।

var checkboxFix = []; 
$("#jqTable td[aria-describedby='columnId'] input").each(function() { 
     checkboxFix.push($(this).attr('checked')); 
}); 

तब मैं मिश्रित मूल्यों के साथ नीचे दिए गए कोड से मिला:

मैं इस समस्या को इस कोड का उपयोग संकल्प लिया।

$("#jqTable").jqGrid('getGridParam', 'data'); 

मुझे उम्मीद है कि यह किसी की मदद करेगा।

Answer 6

बेहतर समाधान:

<script type="text/javascript"> 
    var boxUnformat = function (cellvalue, options, cell) { return '-1'; }, 
     checkboxTemplate = {width:40, editable:true, 
      edittype: "checkbox", align: "center", unformat: boxUnformat, 
      formatter: "checkbox", editoptions: {"value": "Yes:No"}, 
      formatoptions: { disabled: false }}; 
    jQuery(document).ready(function($) {   
     $(document).on('change', 'input[type="checkbox"]', function(e){ 
      var td = $(this).parent(), tr = $(td).parent(), 
       checked = $(this).attr('checked'), 
       ids = td.attr('aria-describedby').split('_'), 
       grid = $('#'+ids[0]), 
       iRow = grid.getInd(tr.attr('id')); 
       iCol = tr.find('td').index(td); 
      grid.editCell(iRow,iCol,true); 
      $('input[type="checkbox"]',td).attr('checked',!checked); 
      grid.saveCell(iRow,iCol); 
     }); 
    }); 
</script> 

अपने colModel में:

... 
{name:'allowAccess', template: checkboxTemplate}, 
...