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

Posted 2023-05-09

【中文标题】使用 jquery.BlockUI 插件禁用整个 jqGrid（jQuery Grid 插件）

【英文标题】：Disabling entire jqGrid (jQuery Grid Plugin) using jquery.BlockUI plugin

【发布时间】：2013-11-17 14:03:19

【问题描述】：

我有下面的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( ...

我做错了什么？

【问题讨论】：

Disable entire jqGrid的可能重复

【参考方案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 一起产生以下结果：

【讨论】：

非常感谢！它完美地工作。我的问题是包含 jquery.blockUI 时。尽管我已将它包含在页面中，但它没有被正确包含。我必须将它包含在母版页中。很好的解释和很好的例子！再次感谢您花一些时间帮助我。