Question

我正在尝试向SpreadJS中的列添加自动完成功能，这样当用户键入单元格时，将显示一个下拉列表，其中包含从服务器检索的匹配项。 SpreadJS文档说明：

SpreadJS支持组合框，复选框，按钮，文本，超链接， Wijmo编辑单元格（AutoCompleteTextBox）和自定义单元格类型。

http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/celltypes.html

AutoCompleteTextBox听起来像是可以做到的;但是，我找不到任何证明如何实现这一目标的文件或样本。我可以创建一个自定义单元格类型，但如果我可以利用已经存在的功能，那就更好了！

有谁知道如何实现这个目标？

谢谢，斯科特

Answer 1

我也有同样的问题，但我调整了TextCellType以使用jQueryUI自动完成。

  <div>
    <input type='hidden' id="dropDownCellInfo" />
    <div id="ss" style="height:500px;border:solid gray 1px;"/>
  </div>

您可以参考jQuery UI documentation了解有关使用自动填充小部件的更多信息。下面的代码创建一个TextCellType并覆盖其创建编辑器方法，以创建一个文本元素并使用jQuery自动完成初始化它。

我必须使用隐藏的文本元素来捕获从列表中选择选项后我必须更新值的行和列。可能有更好的方法，但这适用于。

  var cellType = new $.wijmo.wijspread.TextCellType();
  cellType.createEditorElement = function(context)
  {
    var obj = jQuery('#dropDownCellInfo');
    obj.data('sheet' , context.sheet);
    obj.data('row', context.row);
    obj.data('col', context.col);

    console.log(context);
    var $textarea = $('<input type="text" id="txtSearch" style="visible:false" />');
    var editor = document.createElement("div");
    $(editor).append($textarea);
    $textarea.autocomplete({
      minLength: 2,
      autoFocus : true,
      source: 'http://localhost/spreadjs/index.php',
      focus: function( event, ui ) {
        $( "#txtSearch" ).val( ui.item.inst_name );
        return false;
      },
      select: function( event, ui ) {
        $( "#txtSearch" ).val( ui.item.inst_name );              
        var obj = jQuery('#dropDownCellInfo');
        var spd = jQuery("#ss").wijspread("spread").getActiveSheet().setActiveCell(obj.data('row'),obj.data('col'));

        // We have to explicitly remove the list element from the DOM because some 
        // how the method creates a new list for each autocomplete request and does not deletes the list after onSelect event.
        jQuery('ul.ui-autocomplete').remove();
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.inst_name + "</a>" )
        .appendTo( ul );
    };
    return editor
  };
  sheet.getColumn(3).cellType(cellType);

Answer 2

我联系了Wijmo：这是文档中的拼写错误。 However, they did very helpfully provide an example using a custom cell type to achieve similar functionality.

使用SpreadJS自动完成

2 个答案: