0

slickgrid列にリストボックスが定義されています。リストボックスからオプションを選択するには、最初にセルを選択する必要があり、次にリストボックスからオプションを選択できるという問題があります。したがって、ユーザーは1回ではなく2回クリックする必要があります。ユーザーがワンクリックでリストボックスを開いて必要な値を選択できるようにするには、何をする必要がありますか。

次のセルフォーマッタとエディタを使用して、リストボックスを表示します。

フォーマッター：

function SelectCellFormatter(row, cell, value, columnDef, dataContext) {
    opt_values = columnDef.options.split(',');
    option_str = "";
    for( i in opt_values ){ 
        v = opt_values[i]; 
        if(v == value)
        {
            option_str += "<OPTION value='"+v+"' selected>"+v+"</OPTION>";
        }
        else
        {
            option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
        }
    } 
    return "<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>"
}

編集者：

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

2 に答える 2

0

まず、フォーマッターとエディターの両方で同じコントロールを実装しています。これは何の役にも立ちません。

第 2 に、SlickGrid アーキテクチャは、セル内でリッチな編集可能なコントロールを使用するのにはあまり適していません。SlickGrid は、セルが編集モードに切り替わったときにのみロードするように設計されています (その背後にある理由についてはここでは説明しません)。

@njrが指摘したように、最初のクリックでコンボボックスを「開く」ことはできませんが、「autoEdit」オプションを設定してセルをすぐに編集モードにすることができます。

于 2012-04-18T21:07:01.097 に答える
0

解決策は、エディターではなく、フォーマッターのみを使用することです。クリックすると、期待どおりにリスト ボックスが開きます。次に、フォーマッタの onChange メソッドを使用して、必要なロジックを実行できます。

唯一の問題は、新しい行のフォーマッタを定義できなかったことです。enableAddRow : false を設定し、挿入ボタンを使用して新しい行を追加しました。

フォーマッタ:

function SelectCellFormatter(row, cell, value, columnDef, dataContext) {
    opt_values = columnDef.options.split(',');
    option_str = "";
    for( i in opt_values ){ 
        v = opt_values[i]; 
        if(v == value)
        {
            option_str += "<OPTION value='"+v+"' selected>"+v+"</OPTION>";
        }
        else
        {
            option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
        }
    } 
    return "<SELECT onchange='SelectCellFormatter_onchange(this, "
       + row + "," + cell + ",\"" + value + "\");'>"+ option_str + "</SELECT>"
}

SelectCellFormatter:

function SelectCellFormatter_onchange(vThis, vRow, vCell, vValue)
{
     document.protokoll_form.protokoll_name.value += " row/" + vRow;
     document.protokoll_form.protokoll_name.value += " cell/" + vCell;
     document.protokoll_form.protokoll_name.value += " old/" + vValue;
     document.protokoll_form.protokoll_name.value += " new/" 
            +  vThis[this.event.currentTarget.selectedIndex].value;
}
于 2012-04-20T16:39:34.217 に答える