Slickgrid Combobox如何实现值-显示类型绑定

Question

使用来自网络的示例，我尝试实现我自己的自定义组合框 (YesNoEditor)，它允许保存显示和值成员。这个想法是让 SELECT 标记的 HTML 输出包含选项值和要显示的实际文本，如下所示：

("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='valuemember'>DisplayMember</OPTION></SELECT>");

这是我修改后的来自 slick.editors.js 的 YesNoEditor 版本

    function YesNoSelectEditor(args) {
      var $select;
      var defaultValue;
      var scope = this;

      this.init = function () {

          if (args.column.options && args.column.display) {
              opt_display = args.column.display.split(',');
              opt_values = args.column.options.split(',');
          } else {
              opt_values = "yes,no".split(',');
          }
          option_str = "";
          for (i in opt_values) {
              v = opt_values[i];
              d = opt_display[i];
              option_str += "<OPTION value='" + v + "'>" + d + "</OPTION>";
          }
          $select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>");
          $select.appendTo(args.container);
          $select.focus();
      };

      this.getDefaultValue = function () {
          return defaultValue;
      };


      this.destroy = function () {
          $select.remove();
      };

      this.focus = function () {
          $select.focus();
      };

      this.loadValue = function (item) {
          defaultValue = item[args.column.field];
          $select.val(defaultValue);
      };

      this.getSelectValue = function () {
          if (args.column.options) {
              return $select.val();
          }
      }

      this.serializeValue = function () {
          if (args.column.options) {
              return $select.children("option:selected").text();
          } 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();
  }

这主要是有效的，除了当我尝试手动单击组合框时，它偶尔会将文本值更改为之前选择的值以外的值。例如，组合框的显示值可能为 2，但当我单击单元格以激活组合框时，显示值变为 1。

有什么好的替代方法来完成我需要的吗？

-----编辑2

这是我如何使用 YesNoEditor 定义列的示例

{ id: "Type", name: "Customer Type", width: 100, field: "Type", editor: Slick.Editors.YesNoSelect, options: customerTypeList.join(","), display: customerTypeList.join(",")},

Answer 1

我认为您的问题出在 this.loadValue 函数中...这是我使用的一段代码，它总是使下拉菜单以正确的选择打开：

this.loadValue = function(item) {
    defaultValue = item[args.column.field];
    $select.val(defaultValue);
};

值得一试，希望就是这样......让我知道
编辑
这是我的完整代码 custom ，我可以传递自定义值或在找不到任何内容时使用默认的是/否：

function SelectEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;

    this.init = function() {

        if(args.column.editorOptions.options){
            tabOptions = args.column.editorOptions.options.split(',');
            if(args.column.editorOptions.values)
                tabValues = args.column.editorOptions.values.split(',');
        }else{
            tabOptions ="yes,no".split(',');
        }
        var option_str = "";
        for( i in tabOptions ){
            var opt = $.trim( tabOptions[i] ); // remove any white space including spaces after comma
            //var val = (typeof tabValues == 'undefined') ? tabOptions[i] : tabValues[i];
            option_str += "<OPTION value='"+opt+"'>"+opt+"</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.editorOptions.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();
}

我意识到我忘了提到我在columns 数组定义中如何称呼它...

{ id:'column1', field:'column1', name: "Column 1", width:75, editor: Slick.Editors.Select, editorOptions:{options:"val1,val2,val3"}  }

编辑 #2
好吧，在了解您的真正需求之后，我更改了我的代码，甚至对其进行了测试以确保它可以正常工作……它确实可以按照您的意愿工作：

    function YesNoSelectEditor(args) {
      var $select;
      ...

      // define both your arrays here so they are global and availble from everywhere
      var opt_values = [];  
      var opt_display = [];

      ... 

    this.loadValue = function (item) {
        var displayedText = item[args.column.field];

        // first find the index position inside your Display Array, ex.: Colorado
        var idxPos = $.inArray(displayedText,opt_display); 

        // second use that index found to get the value, ex.: CO
        defaultValue = opt_values[idxPos];

        // then select that value ex.: $select.val("CO");
        $select.val(defaultValue);
    };

    ...
}

Answer 2

解决方案是使用额外的格式化程序：

function ComboFormatter(row, cell, value, columnDef, dataContext) { var opt_display = ["Text1", "Text2"]; var opt_values = ["27", "51"]; var idxPos = $.inArray(value,opt_values); return opt_display[idxPos]; }

`function ComboEditor(args) { 变量$选择； 变量默认值； var scope = this;

        this.init = function() {
            $select = $("<select ....<option></....</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(item[args.column.field]);
            $select.select();
        };

        this.serializeValue = function() {
            return ($select.val());
        };

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