Slickgrid, colonne avec une liste de sélection déroulante?

Question

Salut Je me demandais si quelqu'un sait s'il est possible de définir une colonne dans slickgrid comme étant une liste de sélection déroulante. Si non, est-ce que quelqu'un avec une certaine expérience avec slickgrid sait comment je devrais aller ajouter cette option?

Merci

Answer 1

Je suppose que vous voulez dire un éditeur de cellule personnalisé. Voici un exemple d'éditeur de cellules booléennes basé sur select de slick.editors.js. Vous pouvez facilement le modifier pour travailler avec un ensemble arbitraire de valeurs possibles.

function YesNoSelectCellEditor($container, columnDef, value, dataContext) { 
    var $select; 
    var defaultValue = value; 
    var scope = this; 

    this.init = function() { 
     $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>"); 

     if (defaultValue) 
      $select.val('yes'); 
     else 
      $select.val('no'); 

     $select.appendTo($container); 

     $select.focus(); 
    }; 


    this.destroy = function() { 
     $select.remove(); 
    }; 


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

    this.setValue = function(value) { 
     $select.val(value); 
     defaultValue = value; 
    }; 

    this.getValue = function() { 
     return ($select.val() == 'yes'); 
    }; 

    this.isValueChanged = function() { 
     return ($select.val() != defaultValue); 
    }; 

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

    this.init(); 
}; 

Answer 2

Vous ne voulez probablement pas créer un nouvel éditeur de sélection pour chaque plage d'options. De plus, vous ne connaissez peut-être pas cette fourchette de valeur de l'option à l'avance.

Dans ce cas, vous souhaitez une gamme d'options flexible dans un éditeur de type select. Pour ce faire, vous pouvez ajouter une option supplémentaire à vos définitions de colonne (par exemple, appelées options) comme ceci:

var columns = [ 
    {id:"color", name:"Color", field:"color", options: "Red,Green,Blue,Black,White", editor: SelectCellEditor}, 
    {id:"lock", name:"Lock", field:"lock", options: "Locked,Unlocked", editor: SelectCellEditor} 
] 

et l'accès que l'utilisation args.column.options dans la méthode d'initialisation de votre propre objet SelectEditor comme ceci:

SelectCellEditor : function(args) { 
     var $select; 
     var defaultValue; 
     var scope = this; 

     this.init = function() { 

      if(args.column.options){ 
       opt_values = args.column.options.split(','); 
      }else{ 
       opt_values ="yes,no".split(','); 
      } 
      option_str = "" 
      for(i in opt_values){ 
       v = opt_values[i]; 
       option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>"; 
      } 
      $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>"); 
      $select.appendTo(args.container); 
      $select.focus(); 
     }; 

     this.destroy = function() { 
      $select.remove(); 
     }; 

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

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

     this.serializeValue = function() { 
      if(args.column.options){ 
       return $select.val(); 
      }else{ 
       return ($select.val() == "yes"); 
      } 
     }; 

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

     this.isValueChanged = function() { 
      return ($select.val() != defaultValue); 
     }; 

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

     this.init(); 
    } 

Answer 3

Si votre cellule contient déjà une balise "select" avec plusieurs options, vous pouvez extraire ce code html des arguments. L'approche diffère des réponses précédentes, mais j'étais personnellement troublé par ces solutions, bien sûr ma cellule contenait déjà un select-tag. Je voudrais réutiliser cette cellule au lieu de la reconstruire complètement dans le this.init. De même, je voudrais continuer à utiliser les mêmes options, que mon existant sélectionnez déjà, au lieu de les analyse à la var column = { ...

Le $(args.item[ args.column.field ]) retour des cellules actives contenu, ce qui fondamentalement juste réimprègnent ajoutée au container du (l'objet-cellule). De if (document.createEvent) et vers le bas, est juste une fonctionnalité qui ouvre automatiquement la liste déroulante à l'activation; etc. lorsque vous utilisez la tabulation pour naviguer vers la cellule.

function SelectCellEditor(args) { 
    var $select; 
    var defaultValue; 
    var scope = this; 

    this.init = function() { 
     $select = $(args.item[ args.column.field ]); 
     $select.appendTo(args.container); 
     $select.focus(); 

     // Force the select to open upon user-activation 
     var element = $select[ 0 ]; 

     if (document.createEvent) { // all browsers 
      var e = new MouseEvent("mousedown", { 
       bubbles: true, 
       cancelable: true, 
       view: window 
      }); 

      element.dispatchEvent(e); 
     } else if (element.fireEvent) { // ie 
      element.fireEvent("onmousedown"); 
     } 

    }; 
} 

éditeur Kits de Dropdown html-input -> Dropdown html sortie

function SelectCellEditor(args) { 
    var $select = $(args.item[ args.column.field ]); 
    var defaultValue; 
    var scope = this; 

    this.init = function() { 
     //$select 
     $select.appendTo(args.container); 

     // Force the select to open upon user-activation 
     var element = $select[ 0 ]; 

     if (document.createEvent) { // all browsers 
      var e = new MouseEvent("mousedown", { 
       bubbles: true, 
       cancelable: true, 
       view: window 
      }); 

      element.dispatchEvent(e); 
     } else if (element.fireEvent) { // ie 
      element.fireEvent("onmousedown"); 
     } 

     $select.on("click", function(e) { 
      var selected = $(e.target).val(); 

      $select.find("option").removeAttr("selected"); 
      $select.find("option[value='" + selected + "']").attr("selected", "selected"); 
     }); 

    }; 

    this.destroy = function() { 
     $select.remove(); 
    }; 

    this.focus = function() { }; 

    this.loadValue = function (item) { }; 

    this.serializeValue = function() { }; 

    // Only runs if isValueChanged returns true 
    this.applyValue = function (item, state) { 
     item[ args.column.field ] = $select[ 0 ].outerHTML; 
    }; 

    this.isValueChanged = function() { 
     return true; 
    }; 

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

    this.init(); 
}