我正在使用kendoUI自动完成。要以带“ x”标记的框格式显示每个记录,我已经实现了]
$("#roleAuto").kendoAutoComplete({
dataSource: roledata,
filter: "startswith",
placeholder: "Select Role...",
select: function (e, ui) {
alert("hi");
$(".roleSelection:checked").each(function () {
var role = $(this).attr("data-name"),
var span = $("<span>").text(role),
a = $("<a>").addClass("remove").attr({
title: "Remove " + role
}).text("x").appendTo(span);
alert(role);
span.insertBefore("#roleAuto");
$("#Roles").click(function () {
$("#roleAuto").focus();
});
$(".remove", document.getElementById("Roles")).live("click", function () {
$(this).parent().remove();
if ($("#Roles span").length === 0) {
$("#roleAuto").css("top", 0);
}
});
});
我能够在框中用“ x”符号显示每个记录。如果单击“ x”标记,则能够删除记录,我希望该删除的项目ID值。我怎么能得到这个?
有一种自动完成方法(以及许多其他数据绑定窗口小部件):
kendo.ui.widget.dataItem(index);
以及该事件的方法称为:
event.item.index();
自动完成方法的文档:AutoComplete Documentation
因此,作为select函数的第一行,您可以编写:
var dataItem = this.dataItem(e.item.index());
您的点击事件实时方法如下所示:
$(".remove", document.getElementById("Roles")).live("click", function () {
alert(dataItem.Id); //Or in whichever property your Id is stored.
$(this).parent().remove();
if ($("#Roles span").length === 0) {
$("#roleAuto").css("top", 0);
}
});