1

如何覆盖获取用户选择或输入的值并将其放入触发输入的函数?

例如我的数据源是:

[
    {
        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.


我正在制作用户输入零件编号的东西,如果发现零件以用户输入的内容开头,它们会显示在自动完成中并且可以选择。

输入值并且网格单元格离开编辑模式后,需要将引导弹出窗口放置在单元格中的值上。

希望我已经解释得足够好。


我之前尝试过类似的方法,但仍然无法正常工作。我有:

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');
          }
        })
})
4

1 回答 1

0

要设置值,您应该使用value函数。change从事件处理程序内部执行此操作是:

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

编辑因为在您的情况下,您可以访问行模型,因为在编辑器功能partNumberScanner中您收到它,options您可以简单地执行以下操作:

change: function(e) {
    options.model.set(options.field, "New Value");
}
于 2013-03-25T12:34:52.840 回答