Question

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

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

FORMATTER：

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

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

其次，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;
}

Slick Grid - 列表框上的点击次数过多

2 个答案: