如何覆盖获取用户选择或输入的值并将其放入触发输入的函数?
例如我的数据源是:
[
{
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');
}
})
})