スリックグリッド - リストボックスのクリック数が多すぎます

Question

リストボックスは、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>" 
} 

EDITOR：すべての

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 1

まず、あなたが同じ制御を実装していますフォーマッタとエディタの両方で使用できます。これは有用な目的には役立ちません。

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

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

Answer 2

解決策は、フォーマッタのみを使用し、エディタを使用しないことです。 クリックするとリストボックスが開きます フォーマッタの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; 
}