Question

如何覆盖用户选择或输入的值并将其置于触发输入中的函数？

E.g。我的数据源是：

[
    {
        id: 1,
        name: "Tim"
    },
    {
        id: 2,
        name: "Bob"
    }
]

我希望自动填充功能返回：

<span class="my-class">Tim</span>

而不只是Tim

我使用它作为KendoUI Grid中单元格的编辑器，所以我一旦不再编辑单元格，其HTML就是这样：

<td role="gridcell"><span class="my-class">Tim</span></td>

以下是网格列的编辑器：

function partNumberScanner(container, options)
{
  partId = options.model.id;
  var autoC = $('<input class="k-input data-value-field="id" k-textbox part-sniffer" data-bind="value:' + options.field + '"/>')
  autoC.appendTo(container);
  autoC.kendoAutoComplete({
    dataTextField: "idealForm",
    dataValueField: "id",
    delay: 50,
    dataSource: {
      serverFiltering: true,
      transport: {
        read: {
          url: ROOT+"part/fetch-parts",
          type: "POST",
          dataType: "json"
        }
      },
      error: function(e) {
        alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
      },
      schema: {
        id: "id",
        idealForm: "idealForm",
        manufacturer: "manufacturer"
      }
    },
    minLength: 5,
    filter: "contains",
    placeholder: "Start typing...",
    //template: '#= "<li class=\'k-item\' role=\'option\' data-manufacturer=\'"+manufacturer+"\'>"+idealForm+"</li>" #',
    select: function(e)
    {
      matchedPartData = this.dataItem(e.item.index());
      manufacturer = matchedPartData.manufacturer;
    },
    change: function(e) {
     // selectedPart = this.value();
      $.each(partData, function(i, v){
        if(partId == v.id)
        {
          targetId = i ;
          return false
        }
      })
      partData[targetId].manufacturer = manufacturer;
      grid.dataSource.sync();


    }
  });
}

问题是当单元格仍处于编辑模式时调用change回调，因此我需要更改从change返回的值。

我正在制作用户输入部件号的内容，如果从用户输入的内容开始找到部件，则会在自动填充中显示这些部件，并且可以选择。

一旦输入了值并且网格单元格离开了编辑模式，就需要将bootstrap popover放在单元格中现在的值上。

希望我已经解释得很好。

我之前尝试过类似的东西，但仍无法让它发挥作用。我有：

template: "<span data-content=''>#= partNumber #</span>"

我需要做的是，一旦做出选择，就会进行一次AJAX调用，它会将数据放回到单元格的数据内容属性中。

change: function(e) {
...
options.model.set(options.field, '<span class="part-intel">'+this.value()+'</span>');
grid.dataSource.sync();
$.ajax({
          url: ROOT+'part/partAnalysis',
          async: false,
          success: function(data)
          {
            element = container.find('span.part-intel');
            /*element.popover({
            html: true,
            content: data
          })*/
            alert(element.html()) // Shows undefined
           // element.popover('show');
          }
        })
})

Answer 1

要设置值，您应使用value功能。从change事件处理程序中执行此操作是：

change: function(e) {
    e.sender.value("New Value");
}

修改因为在您的情况下您可以访问行模型，因为在编辑器函数partNumberScanner中您可以在options中收到它，您可以这样做：

change: function(e) {
    options.model.set(options.field, "New Value");
}

覆盖KendoUI自动完成选定的值

1 个答案: