我正在使用带有 custom.command 的具有分层网格(父网格和子网格)的剑道网格；单击子项的查看按钮(在父网格的情况下它运行良好)时，它应该调用显示该行详细信息的 java 脚本函数，但发生的是它两次调用 javascript，第一次具有正确的行 ID(即同一行)然后第二次使用错误的 ID(即父网格的第一个 ID)。

代码如下。

父网格

@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>()
.Name("GridAudit")
.Columns(column =>
    {
        column.Bound(model => model.LogId).Visible(true);
        column.Bound(model => model.Date);
        column.Bound(model => model.Time);
        column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User"));
        column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150);
        column.Bound(model => model.Activity);
        column.Bound(model => model.Description).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200);
        column.Command(command =>
        {
            command.Custom("View").Text(" ").Click("onParentAuditHirarchy");
        }).Width("6em").Title("Actions");
    })
.Reorderable(reorder => reorder.Columns(true))
.Selectable(select => select.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.ClientDetailTemplateId("template1")
.Sortable()
.Scrollable(scroll => scroll.Enabled(false))
.Filterable()
.Pageable(page => page.ButtonCount(5))
.HtmlAttributes(new { style = "height:400px" })
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("Audit_Load", "AuditLog").Data("getSearchData")
)
.PageSize(11)
)
)

子网格

<script id="template1" type="text/kendo-tmpl">
@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>()
    .Name("GridDetails" + "#=LogId#")
    .AutoBind(true)
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
     .Columns(column =>
    {
        column.Bound(model => model.LogId).Visible(true);
        column.Bound(model => model.Date);
        column.Bound(model => model.Time);
        column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User"));
        column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150);
        column.Bound(model => model.Activity);
        column.Bound(model => model.Description).Width(200);//.ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200);
        column.Command(command =>
        {
            command.Custom("View").Text(" ").Click("onGridAuditHirarchy");
        }).Width("6em").Title("Actions");
    })
    .Selectable()
    .ClientDetailTemplateId("template2")
    .Sortable()
    .HtmlAttributes(new { style = "height:300px;" })
    .Scrollable(scroll => scroll.Enabled(false))
    .Filterable()
    .Pageable(page => page.ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("LoadHirarchy", "AuditLog", new { auditId = "#=LogId#" }))
        .PageSize(3)
    )
    .ToClientTemplate()
 )
 </script>

Javascript

<script type="text/javascript">

function GetAuditId() {
    return {
        auditId: $(hdnTempGridId).val()
    }
}

onParentAuditHirarchy = function (e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var id = dataItem.LogId;

        $(hdnTempGridId).val(id);

        var win = $("#window").data("kendoWindow");
        var grid = $("#GridDetails").data("kendoGrid");
        grid.dataSource.read();

        win.setOptions({
            width: 900,
            height: 400
        });

        win.open();
        win.center();


}

onGridAuditHirarchy = function (e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var id = dataItem.LogId;

    if (e.delegateTarget.id != 'GridAudit') {
        $(hdnTempGridId).val(id);

        var win = $("#window").data("kendoWindow");
        var grid = $("#GridDetails").data("kendoGrid");
        grid.dataSource.read();

        win.setOptions({
            width: 900,
            height: 400
        });

        win.open();
        win.center();
    }

}

$(document).ready(function () {
    var win = $("#window").data("kendoWindow");
    win.close();

});
</script>

然后通过java脚本打开Kendo窗口。

@(Html.Kendo().Window()
  .Name("window") //The name of the window is mandatory. It specifies the "id" attribute of the widget.
  .Title("Audit Log Detail(s)") //set the title of the window
  .Content(@<text>
      @(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditDetailListModel>()
    .Name("GridDetails")
    .AutoBind(false)
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable()
    .Sortable()
    .HtmlAttributes(new { style = "height:300px;" })
    .Scrollable(scroll => scroll.Enabled(false))
    .Filterable()
    .Pageable(page => page.ButtonCount(5))

    .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("LoadDetails", "AuditLog").Data("GetAuditId"))
                .PageSize(10)
            )
)
            </text>)
  .Visible(false)
  .Modal(true)
)

最佳答案

您可以通过检查第一个命令事件显示的元素是否可见来解决这个问题:

function showDetailsLevel(e) {
    e.preventDefault();
    originatingId = this.dataItem($(e.currentTarget).closest("tr")).Id

    var wnd = $("#Details").data("kendoWindow");  

    if (!$("#Details").is(":visible")) { 
        wnd.center();
        wnd.open();
        var grid = $("#DetailGrid").data("kendoGrid");
        grid.dataSource.read();
    }   
}

关于javascript - 具有层次结构的网格自定义命令调用 javascript 函数两次。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19160569/