具有多个选择的双手下拉菜单

2 回答

• 2

  哇 . 这么多努力 . 现在，一年多以后，它变得容易多了 .

  我成功使用了Chosen jQuery插件 . 这很简单 .

  这里's one person'的例子：https://github.com/mydea/handsontable-chosen-editor

  选择是美丽的 . 我正在使用多重选择自动完成 . 这是渲染器：

  function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {
  
      var selectedId;
      var optionsList = cellProperties.chosenOptions.data;
  
      if(typeof optionsList === "undefined" || typeof optionsList.length === "undefined" || !optionsList.length) {
          Handsontable.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);
          return td;
      }
  
      var values = (value + "").split(",");
      value = [];
      for (var index = 0; index < optionsList.length; index++) {
  
          if (values.indexOf(optionsList[index].id + "") > -1) {
              selectedId = optionsList[index].id;
              value.push(optionsList[index].label);
          }
      }
      value = value.join(", ");
  
      Handsontable.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);
      return td;
  }
  

  然后我就像设置特定列一样这个：

  columns: [
      {},
      {},
      {type: 'numeric'},
      {type: 'dropdown', source: ['', 'NAME', 'FNB']},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {type: 'dropdown', source: ['', 'S', 'M']},
      {},
      {},
      {
          renderer: customDropdownRenderer,
          editor: "chosen",
          width: 150,
          chosenOptions: {
              multiple: true,
              data: productData
          }
      },
      {},
      {editor: false, readOnly: true, width: 1}, 
      {editor: false, readOnly: true, width: 1}
  ],
  

  回复于 2024-05-02T03:41:15+08:00
• 4

  好的，我希望它会对你有所帮助 . 我花了一些时间阅读api并自定义代码:)

  我从 Handsontable 库（最新版本）中获取了示例代码并进行了少量更改 .

  它可能有一些错误，但它只是一个原型，所以你可以编辑并使其看起来更好 .

  出于某种原因，我没有成功使 dropdownlist 可点击 . 它似乎是z-index问题或其他css属性游戏 . 我相信你会找到解决方法 . 目前，您可以通过按住shift进行多项选择来使用键盘进行选择 .

  输出是以逗号分隔的已连接选定选项的集合 .

  例如：

  

  

  为了完成这项工作，在加载handontable libary之后添加此代码 . 它将扩展您的 Handsontable 细胞类型 .

  (function(Handsontable) {
      var SelectEditor = Handsontable.editors.BaseEditor.prototype.extend();
  
      SelectEditor.prototype.init = function() {
          // Create detached node, add CSS class and make sure its not visible
          this.select = document.createElement('SELECT');
          Handsontable.Dom.addClass(this.select, 'htSelectEditor');
          this.select.style.display = 'none';
  
          // Attach node to DOM, by appending it to the container holding the table
          this.instance.rootElement.appendChild(this.select);
      };
      // Create options in prepare() method
      SelectEditor.prototype.prepare = function() {
          // Remember to invoke parent's method
          Handsontable.editors.BaseEditor.prototype.prepare.apply(this, arguments);
          this.isMultiple = !!this.cellProperties.multiple;
          if (this.isMultiple) this.select.multiple = true;
          var selectOptions = this.cellProperties.selectOptions;
          var options;
  
          if (typeof selectOptions == 'function') {
              options = this.prepareOptions(selectOptions(this.row,
                  this.col, this.prop))
          } else {
              options = this.prepareOptions(selectOptions);
          }
          Handsontable.Dom.empty(this.select);
  
          for (var option in options) {
              if (options.hasOwnProperty(option)) {
                  var optionElement = document.createElement('OPTION');
                  optionElement.value = option;
                  Handsontable.Dom.fastInnerHTML(optionElement, options[option]);
                  this.select.appendChild(optionElement);
              }
          }
      };
      SelectEditor.prototype.prepareOptions = function(optionsToPrepare) {
          var preparedOptions = {};
  
          if (Array.isArray(optionsToPrepare)) {
              for (var i = 0, len = optionsToPrepare.length; i < len; i++) {
                  preparedOptions[optionsToPrepare[i]] = optionsToPrepare[i];
              }
          } else if (typeof optionsToPrepare == 'object') {
              preparedOptions = optionsToPrepare;
          }
  
          return preparedOptions;
      };
      SelectEditor.prototype.getValue = function() {
          var result = [];
          var options = this.select && this.select.options;
          var opt;
  
          for (var i = 0, iLen = options.length; i < iLen; i++) {
              opt = options[i];
  
              if (opt.selected) {
                  result.push(opt.value || opt.text);
              }
          }
  
          return result.join();
      };
  
      SelectEditor.prototype.setValue = function(value) {
          this.select.value = value;
      };
  
      SelectEditor.prototype.open = function() {
          var width = Handsontable.Dom.outerWidth(this.TD);
          // important - group layout reads together for better performance
          var height = Handsontable.Dom.outerHeight(this.TD);
          var rootOffset = Handsontable.Dom.offset(this.instance.rootElement);
          var tdOffset = Handsontable.Dom.offset(this.TD);
          var editorSection = this.checkEditorSection();
          var cssTransformOffset;
  
          if (this.select && this.select.options && this.isMultiple) {
              var height = 0;
              for (var i = 0; i < this.select.options.length - 1; i++) {
                  height += Handsontable.Dom.outerHeight(this.TD);
              }
          }
  
          switch (editorSection) {
              case 'top':
                  cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.vertical.clone.wtTable.holder.parentNode);
                  break;
              case 'left':
                  cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.horizontal.clone.wtTable.holder.parentNode);
                  break;
              case 'corner':
                  cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.corner.clone.wtTable.holder.parentNode);
                  break;
          }
          var selectStyle = this.select.style;
  
          if (cssTransformOffset && cssTransformOffset !== -1) {
              selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
          } else {
              Handsontable.Dom.resetCssTransform(this.select);
          }
  
          selectStyle.height = height + 'px';
          selectStyle.minWidth = width + 'px';
          selectStyle.top = tdOffset.top - rootOffset.top + 'px';
          selectStyle.left = tdOffset.left - rootOffset.left + 'px';
          selectStyle.margin = '0px';
          selectStyle.display = '';
  
      };
  
      SelectEditor.prototype.checkEditorSection = function() {
          if (this.row < this.instance.getSettings().fixedRowsTop) {
              if (this.col < this.instance.getSettings().fixedColumnsLeft) {
                  return 'corner';
              } else {
                  return 'top';
              }
          } else {
              if (this.col < this.instance.getSettings().fixedColumnsLeft) {
                  return 'left';
              }
          }
      };
  
      SelectEditor.prototype.close = function() {
          this.select.style.display = 'none';
      };
  
      Handsontable.editors.registerEditor('dvirH', SelectEditor);
  
  })(Handsontable);
  

  使用方法：

  var container = document.getElementById("example1");
  var hot1;
  
  hot1 = new Handsontable(container, {
      data: [
          ['2008', 'Nissan', 11],
          ['2009', 'Honda', 11],
          ['2010', 'Kia', 15]
      ],
      colHeaders: true,
      contextMenu: false,
      columns: [{}, {
          editor: 'select',
          selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
          //  notice that attribute. You can remove it to get a regular select
          multiple: true
      } {}]
  });
  

  here的现场演示

  为了方便你 . 如果要编辑代码，可能需要更改两种方法 .

  • prepare - 每次用户触发编辑器打开事件时都会调用 . 用于配置和操作 .

  • init - 每次单击一个单元格时都会调用该方法 . 它会创建html代码，因此您可以将其更改为复选框 .

  另一件事涉及您关于代码中的内容的问题 .

  Handsontable将任何单元格类型拆分为编辑器和渲染 . 编辑器的所有html代码可能都存在于 init 中，以防您想要更改其中一个 . value 是在编辑模式下 not 时出现在单元格中的html内容，存在于 getValue 方法中 .

  我希望它有所帮助，我希望它适合您当前的版本 .

  回复于 2024-05-02T03:41:15+08:00