具有层次结构的网格自定义命令正在调用 javascript 函数两次。

Posted 2023-05-07

【中文标题】具有层次结构的网格自定义命令正在调用 javascript 函数两次。

【英文标题】：Grid custom Command having hierarchy is calling javascript function twice.

【发布时间】：2013-10-10 05:35:10

【问题描述】：

我正在使用带有 custom.command 的具有分层网格（父网格和子网格）的剑道网格；当单击 Child 的查看按钮（在父网格的情况下它运行良好）时，它应该调用显示该行详细信息的 java-script 函数，但发生的是它调用 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-script打开剑道窗口。

@(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)
)

【问题讨论】：

我也有这个问题。而且我不认为它调用了两次函数，而是调用了函数和父函数，在我的情况下，我在第四层有 4 级层次结构网格，它被调用了 4 次！

【参考方案1】：

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

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();
       

【参考方案2】：

我终于想通了（至少对于我的问题）

父子网格中自定义动作的名称不能相同

command.Custom("View")//parent
command.Custom("View")//child

就这样吧

command.Custom("View1")//parent
command.Custom("View2")//child

我希望这可以节省别人的时间。

【讨论】：

我想我无法收回我的赏金了 :)