Question

我正在使用Kendo UI Grid内联编辑功能。对于不同的条件，如重复等。我正在显示错误消息。如何将错误消息发送到Fadeout？ jQuery fadeOut（）方法不起作用。

<pre><code>
<script type="text/kendo-template" id="message">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
        <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n">
    </div>
</script>
<script type="text/javascript">
    var validationMessageTmpl = kendo.template($("#message").html());
    function error(args) {
        if (args.errors) {
            var grid = $("#DocumentGrid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs                             
                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                    $("#GridError").fadeOut(1000);
                }
            });
        }
    }
    function showMessage(container, name, errors) {
        //add the validation message to the form
        $("#GridError").replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));        
    }
</script>
<div id="GridError"></div>
<div style="width:600px; float:left; margin-top:0px; margin-top:35px;">
<%: Html.Kendo().Grid<DocumentModel>().HtmlAttributes(new { @class = "grid" })
    .Name("DocumentGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DocumentId).Hidden(true);
        columns.Bound(p => p.DocumentName).Title("Document Name");
        columns.Command(command =>
        {
            command.Edit();
        })
        .Width(50)
        .HtmlAttributes(new { @Style = "white-space: nowrap; overflow: hidden;" });
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .ToolBar(toolbar => toolbar.Create().Text("Add Document"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Sort(sort =>
        {
            sort.Add(m => m.DocumentName);
        })
        .Events(events => events.Error("error"))
        .Model(model => model.Id(c => c.DocumentId))
        .Create(update => update.Action("DocumentGrid_Create", "Admin"))
        .Read(read => read.Action("DocumentGrid_Read", "Admin"))
        .Update(update => update.Action("DocumentGrid_Update", "Admin"))
        )
%>
</div>

</code></pre>

Answer 1

从您的代码看，问题似乎是使用replaceWith（）方法。让我为你分解一下。

在页面加载时，您将以下分区添加到DOM <div id="GridError"></div>
发生错误时，会调用function error(args) {}。
在这个函数中，你有一个for循环，用3个参数进一步调用function showMessage()。
在此函数中，您对ID为replaceWith()的DOM元素使用jQuery的方法GridError。这里发生的是你将params发送到模板并接收html标记作为回报。
replaceWith()现在将使用模板返回的新标记替换DOM中的<div id="GridError"></div>（id =“GridError”除法不再存在）。

您的加价：

<div id="GridError"></div>

替换为：

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="field" data-valmsg-for="field" id="field_validationMessage">
    <span class="k-icon k-warning"> </span>Message<div class="k-callout k-callout-n">
</div>

所以当你调用jQuery的方法时：

$("#GridError").fadeOut(1000);

它不起作用，因为GridError不存在。

<强>修复

有很多方法可以解决这个问题，具体取决于您的实施方式。我在这里提到最基本和最简单的解决方法。

替换：

$("#GridError").replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));

使用：

$("#GridError").html($(validationMessageTmpl({ field: name, message: errors[0] })));

Fndoout的Kendo UI网格错误消息

1 个答案: