Slickgrid, column with a drop down select list?

问题:

Hi I was wondering if anyone knows if it's possible to define a column in slickgrid as being a drop down select list. If not does anyone with some experience with slickgrid know how I should go about adding this option?

Thanks

回答1:

I assume you mean a custom cell editor. Here's a sample select-based boolean cell editor from slick.editors.js. You could easily modify it to work with an arbitrary set of possible values.

function YesNoSelectCellEditor($container, columnDef, value, dataContext) {     var $select;     var defaultValue = value;     var scope = this;      this.init = function() {         $select = $("YesNo");          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(); }; 

回答2:

You probably dont want to make a new select editor for each range of options. Also you may not know that range of all option value beforehand.

In that case you want a flexible range of options in a select type editor. In order to do this you can add an extra option to your column definitions (e.g. called options) like this:

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

and access that using args.column.options in the init method of your own SelectEditor object like this:

 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 += ""+v+"";             }             $select = $(""+ option_str +"");             $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();     } 

回答3:

If your cell already contains a "select"-tag with multiple options, you can extract this html from the args. The approach differs from the previous answers, but I was personally troubled with these solutions, course my cell already contained a select-tag. I'd like to reuse this cell instead of reconstructing it completely in the this.init. Likewise, I'd like to keep using the same options, as my existing select already have, instead of parsing them to the var column = { ...

The $( args.item[ args.column.field ] ) return the active cells content, which basically just get re-appended to the the container (the cell-object). From if ( document.createEvent ) and down, is just a functionality which automatically opens the dropdown on activation; etc. when you use tabulator to navigate to the cell.

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 for Dropdown html-input -> Dropdown html-output

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

文章来源: Slickgrid, column with a drop down select list?