1

我有一些情况，需要几秒钟才能在 jqGrid 的 editPopup 上填充下拉列表。显示一些加载消息的最佳方式是什么（类似于加载常规表单时弹出的加载消息）

例如，如果这是我网格中的一列

 { name: "Parent", index: "Parent", width: 250, editable: true, edittype: "select", editoptions: { dataUrl: "/OrganisationalUnit/GetSelectData" }, editrules: { required: false} },

和 dataUrl （在这种情况下： dataUrl: "/OrganisationalUnit/GetSelectData" ）

加载需要很长时间，现在，在从该方法返回数据之前，看起来就像有一个空的填充下拉列表，并且没有视觉指示器表明正在加载。

4

1 回答 1

0

如果您dataUrl在表单编辑中使用，则 jqGrid 会调用内部$.jgrid.createEl方法来发出$.ajax请求dataUrl（请参阅代码片段）。$.ajax不使用beforeSend或complete回调，它使用带有表示已填充属性的context选项。elem<select>

所以我的建议是使用带有和回调ajaxSelectOptions的 jqGrid 选项。在回调内部，您可以创建一些或带有一些加载动画。有很多方法可以从简单的 gif 开始实现动画，直到使用 CSS3动画和@keyframes 之类的nprogress（参见此处）。beforeSendcompletebeforeSend<div><span>

我使用jQuery UI 1.8.2 中的ui-anim_basic_16x16.gif来定义以下 CSS 类：

.my-select-loading {
    background: white url('ui-anim_basic_16x16.gif') right center no-repeat;
    height: 16px;
    width: 16px;
    margin-left: .5em;
    display: inline-block;
}

jqGrid的选项ajaxSelectOptions我这样定义

ajaxSelectOptions: {
    beforeSend: function () {
        var context = this;
        if (context.elem) { // if it called by $.jgrid.createEl
            context.loading = true;
            setTimeout(function () {
                if (context.loading) {
                    $("<span>").addClass("my-select-loading")
                        .insertAfter($(context.elem));
                }
            }, 50);
        }
    },
    complete: function() {
        if (this.elem) {
            this.loading = false;
            var $span = $(this.elem).next("span.ui-autocomplete-loading");
            $span.remove();
        }
    }
}

上面的代码附加了具有类<select>的空<span>元素my-select-loading。只有当服务器在 50 毫秒内没有响应时，我们才会这样做dataUrl（请参阅选项 50 setTimeout）。complete在失败的情况下以及在成功响应的情况下都调用内部dataUrl。结果，用户将看到类似

在此处输入图像描述

上面的代码只是实现的一个例子。使用 . 创建动画元素可能会更好position: absolute。为了在使用上述代码的情况下具有良好的外观，width表单的表单应该足够大以显示插入<span>的动画 gif。

于 2013-11-03T20:23:50.267 回答