SlickGrid सेल संपादक

Question

में jQuery स्वत: पूर्ण करने के लिए कैसे लागू करें मैं SlickGrid सेट अप कर रहा हूं और एक स्वत: पूर्ण संपादक के साथ एक कॉलम रखने की आवश्यकता है। मैंने इसे अपने संशोधित टेक्स्ट एडिटर या डेट एडिटर की कोशिश की। कुछ भी काम नहीं करता है।

क्या कोई मुझे टेक्स्ट एडिटर का आधार के आधार पर कार्यान्वयन का एक मोटा स्केच दे सकता है?

बहुत बहुत धन्यवाद।

Answer 1

मैं slick.editors.js में ऐसा किया - कुछ बग हो सकता है, लेकिन काम करते हैं और मदद से आप आरंभ करने के लिए करना चाहिए:

$.extend(true, window, { 
    "Slick": { 
     "Editors": { 
     "Auto": AutoCompleteEditor, 
     "Text": TextEditor, 
     "Integer": IntegerEditor, 
     "Date": DateEditor, 
     "YesNoSelect": YesNoSelectEditor, 
     "Checkbox": CheckboxEditor, 
     "PercentComplete": PercentCompleteEditor, 
     "LongText": LongTextEditor 
     } 
    } 
    }); 

    var availableTags = [ 
         "ActionScript", 
         "AppleScript", 
         "Asp", 
         "BASIC", 
         "C", 
         "C++", 
         "Clojure", 
         "COBOL", 
         "ColdFusion", 
         "Erlang", 
         "Fortran", 
         "Groovy", 
         "Haskell", 
         "Java", 
         "JavaScript", 
         "Lisp", 
         "Perl", 
         "PHP", 
         "Python", 
         "Ruby", 
         "Scala", 
         "Scheme" 
         ]; 

    function AutoCompleteEditor(args) { 
    var $input; 
    var defaultValue; 
    var scope = this; 
    var calendarOpen = false; 

    this.init = function() { 
     $input = $("<INPUT id='tags' class='editor-text' />"); 
     $input.appendTo(args.container); 
     $input.focus().select(); 
     $input.autocomplete({ 
      source: availableTags 
     }); 
    }; 

    this.destroy = function() { 
     $input.autocomplete("destroy"); 
    }; 

    this.focus = function() { 
     $input.focus(); 
    }; 

    this.loadValue = function (item) { 
     defaultValue = item[args.column.field]; 
     $input.val(defaultValue); 
     $input[0].defaultValue = defaultValue; 
     $input.select(); 
    }; 

    this.serializeValue = function() { 
     return $input.val(); 
    }; 

    this.applyValue = function (item, state) { 
     item[args.column.field] = state; 
    }; 

    this.isValueChanged = function() { 
     return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
    }; 

    this.validate = function() { 
     return { 
     valid: true, 
     msg: null 
     }; 
    }; 

    this.init(); 
    } 

मुझे पता है कि अगर यह मदद करता है करते हैं।

Answer 2

पिछले उत्तर में बस थोड़ा सा अतिरिक्त। तीर कुंजी बनाने के लिए आप stopPropagation करना चाह सकते हैं। यहां संपादक की init विधि से एक स्निपेट है। यह CoffeeScript में है, लेकिन आप अंदाजा हो जाएगा:

$input.bind "keydown.nav", (e) -> 
    e.stopPropagation() if (e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || e.keyCode == $.ui.keyCode.ENTER) && $('ul.ui-autocomplete').is(':visible') 
    e.stopImmediatePropagation() if e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT 

ऊपर टुकड़ा के नियमित JQuery अनुवाद:

$input.bind("keydown.nav", function(e) { 
    if ((e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || 
     e.keyCode == $.ui.keyCode.ENTER) 
     && $('ul.ui-autocomplete').is(':visible')) e.stopPropagation(); 

    if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT) 
     e.stopImmediatePropagation(); 
}); 

Answer 3

पूर्णता के लिए और संबंध में ganeshk करने और Arkadiy जवाब:

एक उपयोगकर्ता जिसे एक्स्टज़िस्टस कहा जाता है, में गितेश पर गैनेश समाधान शामिल है:

https://gist.github.com/Extazystas/b64d98f072344ec395fa

काम करने के लिए स्वत: पूर्ण, आप के रूप में नीचे दिखाया गया है init समारोह में Arkadiy स्निपेट शामिल करने की जरूरत है के लिए:

$input.focus().select(); 

// insert from here ------------------------------ 
$input.bind("keydown.nav", function(e) { 
    if ((e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || 
     e.keyCode == $.ui.keyCode.ENTER) 
     && $('ul.ui-autocomplete').is(':visible')) e.stopPropagation(); 

    if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT) 
     e.stopImmediatePropagation(); 
}); 
// insert to here ------------------------------ 

    $input.autocomplete({ 
    source: availableOptions 
    });