javascript - ¿Slickgrid, columna con una lista de selección desplegable?

jquery tablecolumn

Question

Hola, me preguntaba si alguien sabe si es posible definir una columna en slickgrid como una lista de selección desplegable. Si no, ¿alguien con alguna experiencia con slickgrid sabe cómo debo ir para agregar esta opción?

Gracias

Answer 1

Probablemente no quiera hacer un nuevo editor de selección para cada rango de opciones. También es posible que no sepa de antemano ese rango de valor de todas las opciones.

En ese caso, desea un rango flexible de opciones en un editor de tipo seleccionado. Para hacer esto, puede agregar una opción adicional a sus definiciones de columna (por ejemplo, opciones llamadas) como esta:

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

y acceda a eso utilizando args.column.options en el método init de su propio objeto SelectEditor como este:

 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 2

Si su celda ya contiene una etiqueta "seleccionar" con múltiples opciones, puede extraer este html de los argumentos. El enfoque difiere de las respuestas anteriores, pero personalmente tuve problemas con estas soluciones, por supuesto, mi celular ya contenía una etiqueta de selección. Me gustaría reutilizar esta celda en lugar de reconstruirla completamente en el this.init . Del mismo modo, me gustaría seguir usando las mismas opciones, como ya tengo mi selección existente, en lugar de analizarlas a la var column = { ...

El $( args.item[ args.column.field ] ) devuelve el contenido de las celdas activas, que básicamente se vuelve a agregar al container (el objeto de celda). Desde if ( document.createEvent ) y hacia abajo, es solo una funcionalidad que abre automáticamente el menú desplegable al activarse; etc. cuando usas tabulador para navegar a la celda.

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

    };
}

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

Answer 3

Supongo que te refieres a un editor de celdas personalizado. Aquí hay un ejemplo de editor de celdas booleanas basado en selección de slick.editors.js. Podría modificarlo fácilmente para que funcione con un conjunto arbitrario de valores posibles.

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