SlickGrid ، عمود مع قائمة تحديد المنسدلة؟

Question

مرحبًا ، كنت أتساءل عما إذا كان أي شخص يعرف ما إذا كان من الممكن تحديد عمود في SlickGrid باعتباره قائمة اختيار منسق. إذا لم يكن أي شخص لديه بعض الخبرة مع Slickgrid يعرف كيف يجب أن أذهب لإضافة هذا الخيار؟

شكرًا

Answer 1

أفترض أنك تعني محرر الخلية المخصصة. إليك محرر خلايا منطقية قائم على عينة من Slick.Editors.js. يمكنك بسهولة تعديلها للعمل مع مجموعة تعسفية من القيم المحتملة.

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

ربما لا ترغب في إنشاء محرر محدد جديد لكل مجموعة من الخيارات. كما قد لا تعرف هذا النطاق من جميع قيمة الخيار مسبقًا.

في هذه الحالة ، تريد مجموعة مرنة من الخيارات في محرر نوع تحديد. من أجل القيام بذلك ، يمكنك إضافة خيار إضافي إلى تعريفات العمود الخاصة بك (على سبيل المثال ، تسمى الخيارات) مثل هذا:

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

والوصول إلى ذلك باستخدام args.column.options في طريقة init الخاصة بك SelectEditor كائن مثل هذا:

 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

إذا كانت خليةك تحتوي بالفعل على "تحديد" -Tag مع خيارات متعددة ، فيمكنك استخراج HTML هذا من ARGS. يختلف النهج عن الإجابات السابقة ، لكنني كنت منزعجًا شخصيًا من هذه الحلول ، حيث تحتوي زنزانتي بالفعل على مجموعة مختارة. أرغب في إعادة استخدام هذه الخلية بدلاً من إعادة بنائها بالكامل في this.init. وبالمثل ، أود الاستمرار في استخدام نفس الخيارات ، كما أن Select الحالي لدي بالفعل ، بدلاً من تحليلها إلى var column = { ...

ال $( args.item[ args.column.field ] ) أعد محتوى الخلايا النشطة ، والذي يتم إعادة الظهور بشكل أساسي إلى container (الكائن الخلوي). من عند if ( document.createEvent ) وأسفل ، هي مجرد وظيفة تفتح القائمة المنسدلة تلقائيًا عند التنشيط ؛ وما إلى ذلك عند استخدام الجدولة للانتقال إلى الخلية.

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

    };
}

محرر الانتهاء من القائمة المنسدلة html-input-> القائمة المنسدلة 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 4

بدون JQ ، والعناصر المحقونة المضمنة ، معبأة في الوحدة النمطية:

'use strict';
 class SelectCellWidget {
    constructor(args) {
        this._args = args;
        this._$select = undefined;
        this._defaultValue = undefined;
        this._init();
    }
     _init () {
        let selects, container, divend, opt_values;
        const args = this._args;
        if(args.column.options){
            opt_values = args.column.options.split(',');
        }else{
            opt_values = ["yes","no"];
        }
        container = document.createElement("div");
        container.classList.add('select-editable');
        divend = document.createElement('input');
        divend.setAttribute("type", "text");
        divend.setAttribute("name", "format");
        divend.setAttribute("value", "");
        selects = document.createElement("select");//"<select id='Mobility' tabIndex='0' class='editor-select'>"+ option_str +"</select>";
        selects.setAttribute("id", "Mobility");
        selects.setAttribute("tabIndex", 0);
        selects.setAttribute("class", "editor-select");
        for(let i = 0; i < opt_values.length; i++) {
            let v = opt_values[i];
            let option = document.createElement("option");
            option.setAttribute("value", v);
            option.innerText = v;
            selects.appendChild(option);
        }

        container.appendChild(divend);
        container.appendChild(selects);
        this._$select = container;
        args.container[0].appendChild(this._$select);
        this._$select.focus();
        document.getElementById("Mobility").selectedIndex = args.item[args.column.field] ? opt_values.indexOf(args.item[args.column.field]) : 0;
    }
     destroy () {
        this._$select.remove();
    }
     focus () {
        this._$select.focus();
    }
     loadValue (item) {
       this._defaultValue = item[this._args.column.field];
       this._$select.value = this._defaultValue;
    }
     serializeValue () {
        if(this._args.column.options){
            return this._$select.lastElementChild.value;
        }else{
            return (this._$select.lastElementChild.value === "yes");
        }
    }
     applyValue (item,state) {
       item[this._args.column.field] = state;
    }
     isValueChanged () {
       return (this._$select.lastElementChild.value !== this._defaultValue);
    }
     validate () {
       return {
           valid: true,
           msg: null
       };
    }
}
module.exports=SelectCellWidget; 

https://github.com/yaalfred/slickgridselectdropdownwidget