Slickgrid, Spalte mit einer Dropdown-Liste?

Question

Hi Ich frage mich, ob jemand weiß, ob es möglich ist, eine Spalte in Slickgrid als Dropdown-Auswahlliste zu definieren. Wenn nicht, weiß jemand mit etwas Erfahrung mit Slickgrid, wie ich diese Option hinzufügen sollte?

Danke

Answer 1

Ich nehme an, Sie meinen einen benutzerdefinierten Zelleneditor. Hier ist ein Beispielauswahl-basierter boolscher Zelleneditor von slick.editors.js. Sie könnten es leicht modifizieren, um mit einer beliebigen Menge möglicher Werte zu arbeiten.

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

Sie möchten wahrscheinlich keinen neuen Auswahleditor für jeden Bereich von Optionen erstellen. Außerdem kennen Sie den Bereich aller Optionswerte möglicherweise nicht im Voraus.

In diesem Fall möchten Sie eine flexible Palette von Optionen in einem ausgewählten Typ-Editor. Um dies zu tun, können Sie eine zusätzliche Option, um Ihre Spaltendefinitionen (zB genannt Optionen) wie folgt hinzufügen:

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} 
] 

und den Zugang, dass die Verwendung args.column.options in der Init-Methode des eigenen SelectEditor Objekt wie folgt:

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

Wenn Ihre Zelle bereits einen „Kopie“ -tag mit mehreren Optionen enthält, können Sie diesen hTML aus dem args extrahieren. Der Ansatz unterscheidet sich von den vorherigen Antworten, aber ich hatte persönlich Probleme mit diesen Lösungen, natürlich enthielt meine Zelle bereits ein Auswahl-Tag. Ich möchte diese Zelle wiederverwenden, anstatt sie vollständig in der this.init zu rekonstruieren. Ebenso würde ich gerne behalten die gleichen Optionen verwenden, wie meine bestehenden Auswahl bereits, anstatt sie auf die var column = { ...

Parsen Die $(args.item[ args.column.field ]) geben die aktiven Zellen Inhalte, die im Grunde nur wieder angehängt bekommen auf die der container (das Zellobjekt). Von if (document.createEvent) und nach unten, ist nur eine Funktion, die das Dropdown-Menü bei Aktivierung automatisch öffnet; usw., wenn Sie Tabulator verwenden, um zu der Zelle zu navigieren.

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"); 
     } 

    }; 
} 

Complet-Editor für Dropdown html-Eingang -> Dropdown html-Ausgabe

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(); 
}