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

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一起产生以下结果：