找回密码
 立即注册

QQ登录

只需一步,快速开始

注册会员

11

主题

20

帖子

67

积分

注册会员

积分
67

注册会员   /  发表于:2022-6-13 15:31  /   查看:2114  /  回复:1
1金币
之前有个是自动补全下拉内容控件的需求,按照你们的帮助进行了实现代码如下:function AutocompleteCellType(availableTags) {
  this.availableTags = [];
  if (_.isArray(availableTags)) {
    this.availableTags = availableTags;
  }
}
AutocompleteCellType.prototype = new spreadNS.CellTypes.Base;
AutocompleteCellType.prototype.createEditorElement = function (context) {
  return document.createElement('input');
};
AutocompleteCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
  var $editor = $(editorContext);
  spreadNS.CellTypes.Base.prototype.activateEditor.call(this, editorContext, cellStyle, cellRect, context);
  $editor.css('position', 'absolute');
  $editor.attr('gcUIElement', 'gcEditingInput');
  $editor.autocomplete({
    minLength: 0,
    source: this.availableTags
  }).focus(function() {
    $(this).autocomplete('search', $(this).val());
  });
  $editor.autocomplete('widget').attr('gcUIElement', 'gcEditingInput'); // keep focus when mouse down on dropdown
if(_.isEmpty($editor.val())){
    $editor.autocomplete('search', '');
  }
  return $editor;
};
AutocompleteCellType.prototype.deactivateEditor = function (editorContext, context) {
  if (editorContext) {
    var $editor = $(editorContext);
    $editor.autocomplete('destroy');
  }
  spreadNS.CellTypes.Base.prototype.deactivateEditor.call(this, editorContext, context);
};
AutocompleteCellType.prototype.setEditorValue = function (editorContext, value, context) {
  $(editorContext).val(value);
};
AutocompleteCellType.prototype.getEditorValue = function (editorContext, context) {
  return $(editorContext).val();
};
AutocompleteCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
  if (editorContext) {
    var $editor = $(editorContext);
    $editor.css('width', cellRect.width);
    $editor.css('height', cellRect.height);
    $editor.css('outline', 'none');
    $editor.css('border', '0');
  }
};
AutocompleteCellType.prototype.isReservedKey = function (event, context) {
  var keyCode = _.get(event, 'keyCode');
  return context.isEditing && (_.isEqual(keyCode, 38) || _.isEqual(keyCode, 40));
};目前碰到一个问题是希望像下图中的B21单元格一样,增加一个下拉选图标并绑定相关事件,应该如何做:
2022-06-13 15-28-35屏幕截图.png768361510.png

最佳答案

查看完整内容

无论是上面的自动补全还是层级的下拉框都是基于产品二次开发来实现的,想上面描述的具有补全提示且分层级的下拉框属于业务上的需求了。上面所说的两个demo就是大致实现思路,需自行再次改造实现,这边没有更好的实现建议。

1 个回复

倒序浏览
最佳答案
最佳答案
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2022-6-13 15:31:42
来自 2#
无论是上面的自动补全还是层级的下拉框都是基于产品二次开发来实现的,想上面描述的具有补全提示且分层级的下拉框属于业务上的需求了。上面所说的两个demo就是大致实现思路,需自行再次改造实现,这边没有更好的实现建议。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部