Автозаполнение с помощью SpreadJS

Я пытаюсь добавить функцию автозаполнения в столбец SpreadJS, чтобы при вводе пользователем в ячейку раскрывающийся список отображался с соответствующими элементами, полученными с сервера. В документации SpreadJS указано:

SpreadJS поддерживает поле со списком, флажок, кнопку, текст, гиперссылку, ячейку редактирования Wijmo (AutoCompleteTextBox) и пользовательские типы ячеек.

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

AutoCompleteTextBox звучит так, как будто это может помочь; однако я не могу найти никакой документации или примеров, демонстрирующих, как этого можно добиться. Я мог бы создать пользовательский тип ячейки, но если бы я мог использовать уже существующую функциональность, было бы намного лучше!

Кто-нибудь знает, как я могу это реализовать?

Спасибо, Скотти


html jquery autocomplete wijmo
person Scottie    schedule 17.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У меня тоже была такая же проблема, но я настроил TextCellType, чтобы использовать автозаполнение jQueryUI.

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

Вы можете обратиться к документации по пользовательскому интерфейсу jQuery, чтобы узнать больше об использовании виджета автозаполнения. Приведенный ниже код создает 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);
person Shrikanth    schedule 22.10.2014

arrow_upward
0
arrow_downward

Связался с Wijmo: это опечатка в документации. Однако они очень помогли предоставить пример использования пользовательского типа ячейки для достижения аналогичная функциональность.

person Scottie    schedule 22.10.2014