jquery - 使用 jquery.BlockUI 插件禁用整个 jqGrid(jQuery 网格插件)

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 主题一起生成以下结果: