SlickGrid 下拉框编辑器不起作用答案

【问题标题】：SlickGrid dropdown box editor not workingSlickGrid 下拉框编辑器不起作用
【发布时间】：2012-08-31 09:29:02
【问题描述】：

我正在尝试按照以下方式实现一些东西 Slickgrid, column with a drop down select list?

我的代码是； slick.editors.js ;

(function ($) {
  // register namespace
  $.extend(true, window, {
    "Slick": {
      "Editors": {
        "Text": TextEditor,
        "Integer": IntegerEditor,
        "Date": DateEditor,
        "YesNoSelect": YesNoSelectEditor,
        "Checkbox": CheckboxEditor,
        "PercentComplete": PercentCompleteEditor,
        "LongText": LongTextEditor,
        "SelectOption": SelectCellEditor
      }
    }
  });

进一步定义函数，

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

然后在我的 CSHTML 中

var columns = [

  { id: "color", name: "Color", field: "color", options: "Red,Green,Blue,Black,White", editor: Slick.Editors.SelectOption },
  { id: "lock", name: "Lock", field: "lock", options: "Locked,Unlocked", editor: Slick.Editors.SelectOption },
  ];


    var options = {
        enableCellNavigation: true,
        enableColumnReorder: false
    };

    $(function () {
        var data = [];
        for (var i = 0; i < 20; i++) {
           data[i] = {
           color: "Red",
           lock: "Locked"
            };
   }

网格显示，颜色显示为单元格中的常规文本，但没有下拉菜单？

【问题讨论】：

您是否在 HTML 中包含了slick.editors.js？
只有在编辑该单元格时才会出现下拉菜单。您是说编辑单元格时没有下拉菜单，对吗？
好吧，虽然我是，但我在单元格中单击并没有发生任何事情，但是是的，我忘记在我的选项中添加 editable: true，我猜我一直盯着代码看很久了。谢谢！ :) 我会将其标记为答案。
去过那里 - 很高兴为您提供帮助！我将此添加为答案。

标签： slickgrid

【解决方案1】：

只有在编辑该单元格时才会出现下拉菜单。我认为将editable: true 添加到您的网格选项应该可以工作。

【讨论】：