Slickgrid - एक-क्लिक चेकबॉक्स?

Question

जब मैं स्लिक्ग्रिड में एक चेकबॉक्स कॉलम (फॉर्मेटर्स/संपादकों के उपयोग के माध्यम से) बनाता हूं, मैंने देखा है कि इसमें दो क्लिक लगते हैं (सेल पर ध्यान केंद्रित करने के लिए, और एक चेकबॉक्स से बातचीत करने के लिए)। (जो सही समझ में आता है)

हालांकि, मैंने देखा है कि मैं एक क्लिक के साथ चेकबॉक्स चयनकर्ता प्लगइन (एकाधिक पंक्तियों का चयन करने के लिए) के साथ बातचीत करने में सक्षम हूं। क्या कोई तरीका है कि मैं अपने सभी चेकबॉक्स इस तरह से व्यवहार कर सकता हूं?

Answer 1

मैं अपने बूलियन क्षेत्र 'can_transmit'

मूल रूप से कॉलम आप चाहते हैं पर एक संपादन सेल क्लिक पर कब्जा, परिवर्तन अपने आप को, तो रिटर्न फाल्स बनाने सेल संपादित को रोकने के लिए के लिए इस लक्ष्य को हासिल करने के लिए onBeforeEditCell घटना का इस्तेमाल किया घटना।

grid.onBeforeEditCell.subscribe(function(row, cell) {     
      if (grid.getColumns()[cell.cell].id == 'can_transmit') { 
       if (data[cell.row].can_transmit) { 
        data[cell.row].can_transmit = false; 
       } 
       else { 
        data[cell.row].can_transmit = true; 
       } 
       grid.updateRow(cell.row); 
       grid.invalidate(); 
       return false; 
      } 

यह मेरे लिए काम करता है। हालांकि, यदि आप DataView सुविधा (उदा। फ़िल्टरिंग) का उपयोग कर रहे हैं, तो इस परिवर्तन के साथ डेटाव्यू को अपडेट करने के लिए अतिरिक्त कार्य है। मुझे यह पता नहीं लगा है कि अभी तक यह कैसे करें ...

Answer 2

"ऑनक्लिक" ईवेंट के लिए एक हैंडलर पंजीकृत करें और वहां डेटा में परिवर्तन करें। देखें http://mleibman.github.com/SlickGrid/examples/example7-events.html

grid.onClick.subscribe(function(e, args) { 
    var checkbox = $(e.target); 
    // do stuff 
}); 

Answer 3

मैं अपने CheckBoxCellEditor समारोह में

setTimeout(function(){ $("theCheckBox").click(); },0); 

आह्वान करने और Slick.GlobalEditorLock.commitCurrentEdit बुला() द्वारा DataView साथ नहीं बल्कि hackishly काम कर रहे एक क्लिक के संपादक पाने में कामयाब रहे; जब CheckBoxCellEditor बनाया गया चेकबॉक्स क्लिक किया गया है (उस सेटटाइमआउट द्वारा)।

समस्या यह है कि चेकबॉक्स कॉल्सफॉर्मेटर चेकबॉक्स क्लिक किया गया है, तो वह ईवेंट चेकबॉक्स कॉलएडिटर कोड उत्पन्न करता है, जो चेकबॉक्स को एक नए से बदल देता है। यदि आप उस चयनकर्ता पर jquery's .click() को बस कॉल करते हैं, तो आप चेकबॉक्ससेल एडिटर ईवेंट को फिर से फेंक देंगे क्योंकि स्लिकग्रीड ने हैंडलर को अनबाउंड नहीं किया है जो आपको पहले स्थान पर पहुंचाता है। उस हैंडलर को हटा दिए जाने के बाद सेटटाइमआउट क्लिक को सक्रिय करता है (मैं समय के मुद्दों के बारे में चिंतित था, लेकिन मैं किसी भी ब्राउज़र में किसी भी उत्पाद का उत्पादन करने में असमर्थ था)।

क्षमा करें मैं कोई उदाहरण कोड प्रदान नहीं कर सका, मेरे पास कोड सामान्य समाधान के रूप में उपयोगी होने के लिए विशिष्ट कार्यान्वयन के लिए है।

Answer 4

मुझे इसे हल करने का एकमात्र तरीका slick.checkboxselectcolumn.js प्लगइन को संपादित करना है। मुझे सब्सक्राइब विधि पसंद आई, लेकिन उसने मुझे रेडियो बटन पर किसी भी श्रोता से जोड़ा नहीं है।

तो मैं क्या किया कार्यों handleClick (ई, args) & handleHeaderClick (ई, args) संपादित करने के लिए है। मैंने फ़ंक्शन कॉल जोड़े, और मेरी जेएस फ़ाइल में मैंने बस वही किया जो मैं चाहता था।

function handleClick(e, args) { 
    if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) { 
     ...... 
     //my custom line 
     callCustonCheckboxListener(); 
     ...... 
    } 
} 

---

function handleHeaderClick(e, args) { 
    if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) { 
     ... 
     var isETargetChecked = $(e.target).is(":checked"); 
     if (isETargetChecked) { 
      ... 
      callCustonHeaderToggler(isETargetChecked); 
     } else { 
      ... 
      callCustonHeaderToggler(isETargetChecked); 
     } 
     ... 
    } 
} 

कोड

pastebin.com/22snHdrw

टिप्पणी में अपना उपयोगकर्ता नाम

Answer 5

आगे पाठकों के लिए मैं खुद पर ग्रिड डेटा modifing इस समस्या का समाधान के लिए खोज घटना पर क्लिक करें। बूलियन मान को विपरीत में सेट करना और फिर फॉर्मेटर क्लिक या अनक्लेड चेकबॉक्स प्रदर्शित करेगा।

grid.onClick.subscribe (function (e, args) 
{ 
    if ($(e.target).is(':checkbox') && options['editable']) 
    { 
     var column = args.grid.getColumns()[args.cell]; 

     if (column['editable'] == false || column['autoEdit'] == false) 
      return; 

     data[args.row][column.field] = !data[args.row][column.field]; 
    } 
}); 

function CheckboxFormatter (row, cell, value, columnDef, dataContext) 
{ 
    if (value) 
     return '<input type="checkbox" name="" value="'+ value +'" checked />'; 
    else 
     return '<input type="checkbox" name="" value="' + value + '" />'; 
} 

उम्मीद है कि यह मदद करता है।

Answer 6

जिस तरह से मैंने इसे किया है वह काफी सीधे है।

1. पहला चरण आपको अपने चेकबॉक्स के लिए संपादक हैंडलर को अक्षम करना होगा। मेरी प्रोजेक्ट में ऐसा कुछ दिखता है। मेरे पास प्लगइन पंजीकृत करने और उनके साथ काम करने के लिए एक slickgridhelper.js है।

   function attachPluginsToColumns(columns) { 
       $.each(columns, function (index, column) { 
        if (column.mandatory) { 
         column.validator = requiredFieldValidator; 
        } 
        if (column.editable) { 
         if (column.type == "text" && column.autocomplete) { 
          column.editor = Slick.Editors.Auto; 
         } 
         else if (column.type == "checkbox") { 
          //Editor has been diasbled. 
          //column.editor = Slick.Editors.Checkbox; 
          column.formatter = Slick.Formatters.Checkmark; 
         } 
        } 
       });  
   

2. अगला कदम अपने कस्टम js पेज में एक ऑनक्लिक ईवेंट हैंडलर जो आप विकसित कर रहे हैं रजिस्टर करने के लिए है।

grid.onClick.subscribe(function (e, args) { 
 

 
     var row = args.grid.getData().getItems()[args.row]; 
 
     var column = args.grid.getColumns()[args.cell]; 
 

 
     if (column.editable && column.type == "checkbox") { 
 
      row[column.field] = !row[column.field]; 
 
      refreshGrid(grid); 
 
     } 
 
    });

अब एक क्लिक अपने चेकबॉक्स का मूल्य बदल और यह जारी रहती है करने के लिए पर्याप्त है।