Slick Grid - 列表框点击次数过多答案

【问题标题】：Slick Grid - too many clicks on List BoxSlick Grid - 列表框点击次数过多
【发布时间】：2012-04-29 14:53:23
【问题描述】：

我们在 slickgrid 列中定义了一个列表框。我们有一个问题，要从列表框中选择一个选项，我们首先必须选择单元格，然后才能从列表框中选择选项。因此，用户需要两次点击而不是一次。我们需要做什么才能让用户一键打开列表框选择所需的值。

我们使用以下单元格格式化程序和编辑器来显示列表框：

格式化程序：

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

【问题讨论】：

我不知道它是否会起作用，但您是否尝试在网格选项中设置{ autoEdit: true }？不知道编辑器会不会按正确的顺序激活，让listbox接收到点击。

标签： slickgrid

【解决方案1】：

首先，您在格式化程序和编辑器中实现了相同的控件。这没有任何用处。

其次，SlickGrid 架构不太适合在单元格中使用丰富的可编辑控件。 SlickGrid 设计为仅在单元格切换到编辑模式时才加载它们（我不会在这里详细说明其背后的原因）。

正如@njr 指出的那样，您可以设置“自动编辑”选项以使单元格立即进入编辑模式，尽管这不会在第一次单击时“打开”组合框。

【讨论】：

【解决方案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;
}

【讨论】：