Question

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

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

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

和dataUrl（在这种情况下：dataUrl：“/ OrganisationalUnit / GetSelectData”）

需要很长时间才能加载，此时，在数据从此方法返回之前，它看起来像是一个空的填充下拉列表，并且没有可视指示符表明正在加载某些内容。

Answer 1

如果您在表单编辑中使用dataUrl，则jqGrid会调用内部$.jgrid.createEl方法，该方法会向$.ajax发出dataUrl请求（请参阅the code fragment）。 $.ajax不使用beforeSend或complete回调，并使用context选项和elem属性代表<select>填充。

所以我的建议是使用jqGrid的ajaxSelectOptions选项与beforeSend和complete回调。在beforeSend回调内部，您可以使用一些加载动画创建一些<div>或<span>。有很多方法可以用简单的gif开始实现动画，直到使用CSS3 animation和@keyframes，就像nprogress一样（见here）。

我使用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时才这样做（参见setTimeout的选项50）。 complete内部在失败的情况下以及在dataUrl成功响应的情况下都会调用。结果，用户将看到类似

的内容

enter image description here

上面的代码只是实现的一个例子。使用position: absolute创建动画元素可能会更好。为了好好利用上面的代码，表单的width应该足够大，以显示插入的<span>和动画gif。

使用jqgrid，还是在editPopup上加载下拉列表时显示加载覆盖？

1 个答案: