1

我有一个 Kendo UI Grid 并通过 jQuery 将鼠标事件添加到网格中（例如单击）。这工作没有任何问题。但是通过删除网格中的一行，网格的所有事件也会被删除。我究竟做错了什么？

这是我删除一行的代码：

var rowToDelete = $(this).closest("tr");
var grid = $("#gridId").data("kendoGrid");
grid.removeRow(rowToDelete);

我向网格的每一行添加了一个按钮，向这些按钮添加了一个单击事件，删除了相应的行。删除该行后，所有其他按钮的点击事件都被删除。与网格列的鼠标悬停事件相同。

谢谢你的帮助！

4

2 回答 2

2

请尝试使用以下代码片段。

看法

<script>
function gridDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    grid.tbody.find(">tr").click(function () {
        $("#divTest").html('Row Index Clicked :' + $(this).index());
    });
}

function DeleteRow(obj) {
    var rowToDelete = $(obj).parent().parent()
    var grid = $("#Grid").data("kendoGrid");
    grid.removeRow(rowToDelete);
}
</script>
@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.ID);
    columns.Bound(p => p.Name);
    columns.Template(@<text></text>).ClientTemplate("<input type='button' class='k-button' value='Delete' onclick='DeleteRow(this);' />");

})
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
    .Ajax()
        .Read(read => read.Action("Grid_Read", "Home"))
)
.Events(e => e.DataBound("gridDataBound"))
)
<div id="divTest"></div>

控制器

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
    {
        List<TestModels> models = new List<TestModels>();

        for (int i = 0; i < 5; i++)
        {
            TestModels t1 = new TestModels();
            t1.ID = i;
            t1.Name = "Name" + i;
            models.Add(t1);
        }

        return Json(models.ToDataSourceResult(request));
}

模型

public class TestModels
{
    [Display(Name = "ID")]
    public int ID { get; set; }

    [Display(Name = "Name")]
    public string Name { get; set; }

}

让我知道是否有任何问题。

于 2013-08-13T13:03:15.687 回答
2

您没有发布所有代码，所以我不得不猜测...

发生的情况是您在初始化之后设置了一个与元素关联的事件处理程序，因此对于某些特定的 HTML 元素，但在某些情况下 Kendo UI 网格会重新生成（基本上系统会删除表格并生成一个新表格）。

如果您想为当前表格内容设置事件处理程序，而是为任何未来的内容设置事件处理程序，您可以使用 jQueryon事件，但使用三个参数，其中第二个是选择器（在以前的 jQuery 版本中，这是通过live函数实现的，但现在已弃用，所以如果你的 jQuery 版本支持它更好的使用on）。

你要做的是：

$("#grid").on("click", ".my-selector", function(e) {
    var rowToDelete = $(this).closest("tr");
    var grid = $("#gridId").data("kendoGrid");
    grid.removeRow(rowToDelete);
});

您可能已经设置用于标识按钮my-selector的 CSS属性在哪里。classremove

于 2013-08-13T13:31:39.580 回答