我有一些情况，下拉列表需要几秒钟才能填充到 jqGrid 的 editPopup 上。显示一些加载消息的最佳方式是什么（类似于加载常规表单时弹出的加载消息）
例如，如果这是我的网格中的一列
{ name: "Parent", index: "Parent", width: 250, editable: true, edittype: "select", editoptions: { dataUrl: "/OrganisationalUnit/GetSelectData" }, editrules: { required: false} },
和dataUrl（在这种情况下：dataUrl：“/OrganisationalUnit/GetSelectData”）
加载需要很长时间，现在，在从该方法返回数据之前，看起来只是一个空的填充下拉列表，并且没有视觉指示器表明正在加载。
【问题讨论】：
标签： jquery ajax jqgrid loading
如果您在表单编辑中使用dataUrl，则jqGrid 会在内部调用$.jgrid.createEl 方法，该方法使$.ajax 请求dataUrl（参见the code fragment）。 $.ajax 不使用beforeSend 或complete 回调，它使用context 选项和elem 属性，代表<select> 已填充。
所以我的建议是使用带有beforeSend 和complete 回调的jqGrid 的ajaxSelectOptions 选项。在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 上成功响应的情况下都会调用。结果，用户会看到类似
上面的代码只是实现的一个例子。使用position: absolute 创建动画元素可能会更好。为了在使用上述代码的情况下更好地查看，表单的width 应该足够大以显示插入的<span> 和动画 gif。
【讨论】：