Question

我一直在寻找有关如何禁用jqGrid的方法，我发现了一些：

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

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

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

<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...'
           });
}

在上面的代码中，我也尝试将参数禁用传递给showGrid函数，并根据它是true还是false将变量分别设置为'block'或'enable'，然后使用此变量设置loadui属性但它没有用。

Content.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

禁用整个jqGrid

2 个答案: