1

我一直在寻找有关如何禁用 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>
}

有任何想法吗？

4

2 回答 2

4

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

在这种情况下，您绝对可以使用另一种解决方案来阻止网格。在调用$('#_compGrid').jqGrid({...});初始表的 DOM 元素后，会得到一些扩展 - 新属性或方法。例如$('#_compGrid')[0]将包含包含和方法的grid属性。因此，您可以首先创建网格（在函数中）并包含选项以及您使用的选项列表。然后，如果您稍后需要阻止网格，您可以使用beginReqendReqshowGridloadui: 'block'loadtext: 'Processing...'

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

和代码

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

删除阻塞。请参阅演示这一点的演示。或者，您可以像我在答案中描述的那样手动显示 jqGrid 创建的叠加层。代码很简单：

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

显示叠加层和

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

隐藏叠加层。查看另一个与第一个完全一样的演示。

于 2013-11-06T15:21:48.920 回答
1

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

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

演示

于 2016-03-10T20:02:46.330 回答