jquery - 使用 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();

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

我建议您另外使用theme: trueoption 并将 option 替换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"
    }
});

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