禁用整个 jqGrid

Question

我一直在寻找如何禁用 jqGrid 的方法，我找到了一些方法：

1. 使用 BlockUI 插件：http://jquery.malsup.com/block/
2. 使用 jqGrid 选项：loadui 并将其设置为 'block'

第一个选项是一个很好的解决方案（我还没有尝试过），它可能更清楚，但我想尽可能避免使用插件，只要我可以通过设置对象属性来做到这一点，所以我正在尝试第二个选项，但它是不适合我，jqGrid 继续启用。

我的 jqgrid 在我的 asp.net mvc 4 视图中：

<div id="jqGrid">
    @Html.Partial("../Grids/_PartialGrid")
</div>

和_PartialGrid：

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

所以在视图中，在脚本部分中，我根据模型中属性的状态执行下面的文档准备（如果 id>0，我将禁用它，否则我在页面重新加载时启用它）：

@section scripts
{
    @Content.Script("/Grids/CompGrid.js", Url) // Content is a helper javascript loader (see end of this post)
}

<script type="text/javascript">
$(document).ready(function () {

    showGrid();
    var disableCompGrid = @Html.Raw(Json.Encode(Model.ItemCompViewModel));
    setStatusCompGrid(disableCompGrid.id > 0);

}
</script>

CompGrid.js 是：

function showGrid() {
    $('#_compGrid').jqGrid({
        caption: paramFromView.Caption,
        colNames: ....
}

function setStatusCompGrid(disabled) {
           $('#_compGrid').jqGrid({
                loadui: 'block',
                loadtext: 'Processing...'
           });
}

在上面的代码中，我也尝试将参数 disabled 传递给 showGrid 函数，并根据是否将变量分别设置为“block”或“enable”，然后使用此变量设置 loadui 属性但它不起作用。

内容.cshtml：

@using System.Web.Mvc;

@helper Script(string scriptName, UrlHelper url)
{
    <script src="@url.Content(string.Format("~/Scripts/{0}", scriptName))" type="text/javascript"></script>
}

有什么想法吗？

Answer 1

了解调用$('#_compGrid').jqGrid({...}); 转换 初始空<table id="_compGrid"></table> 元素到相对复杂的潜水和表格结构很重要。所以你可以只调用一次。这样的调用创建和初始化网格。换句话说，函数showGrid 的名字不好。该函数只能调用一次。它的第二次调用将测试网格已经存在并且它不会做任何事情。如果您需要更改现有网格的某些参数，可以使用setGridParam 方法。

如果您完全可以使用另一种解决方案来阻止网格。在调用$('#_compGrid').jqGrid({...}); 之后，初始表的DOM 元素得到一些expandos - 新的属性或方法。例如$('#_compGrid')[0] 将包含grid 属性，其中包含beginReq 和endReq 方法。因此，您可以首先创建网格（在showGrid 函数中）并在您使用的选项列表中包含选项loadui: 'block' 和loadtext: 'Processing...'。然后如果你以后需要阻塞网格你可以使用

$('#_compGrid')[0].grid.beginReq();

和代码

$('#_compGrid')[0].grid.endReq();

移除阻塞。请参阅the demo，它演示了这一点。或者，您可以像我在the answer 中描述的那样手动显示由 jqGrid 创建的叠加层。代码会很简单：

var gridId = "_compGrid"; // id of the grid
...
$("#lui_" + gridId).show();
$("#load_" + gridId).text("Processing...").show();

显示叠加层和

$("#lui_" + gridId).hide();
$("#load_" + gridId).hide();

隐藏覆盖。请参阅another demo，它的工作原理与第一个完全相同。

Answer 2

您不需要任何插件。只需添加/删除 css：

.disabled {
  pointer-events: none;
  //optional
  opacity: 0.4;
}

DEMO