使用 jquery.BlockUI 插件禁用整个 jqGrid（jQuery Grid 插件）

Question

我有下面的jqGrid：

<table id="_myGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_myPager" style="text-align: center;">
</div>

尝试通过执行以下操作来禁用整个 jqGrid 是行不通的：

<script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">

   $(document).ready(function () {
     $('#_myGrid').closest('.ui-jqgrid').blockUI({ 
        message: '<h1>Being processed...</h1>', 
        css: { border: '3px solid #a00' } 
     });
   });

</script>

抛出的错误是： "对象不支持/不接受这个属性或方法'blockUI'"

同样的错误被抛出。

我也试过了：

 $('#_myGrid').blockUI({ ...

我做错了什么？

Answer 1

您在使用blockUI 时犯了一个小错误。正确的用法会是

$("#_myGrid").closest(".ui-jqgrid").block({
    message: "<h1>Being processed...</h1>",
    css: { border: "3px solid #a00" }
});

用于阻塞和

$("#_myGrid").closest(".ui-jqgrid").unblock();

用于解锁。 The demo 演示了阻塞。它显示

我建议您另外使用theme: true 选项并将css 选项替换为themedCSS。为了让您减少使用的 CSS 选项的数量，并使外观与您使用的 jQuery UI 主题更加和谐。例如代码

$("#_myGrid").closest(".ui-jqgrid").block({
    message: "<h1>Being processed...</h1>",
    theme: true,
    themedCSS: {
        width: "35%",
        left: "30%",
        border: "3px solid #a00"
    }
});

我在 the demo 中使用的它与 Redmond jQuery UI Theme 一起产生以下结果：