使用 JQuery 根据单元格值禁用 JQGrid 行

Question

我正在尝试禁用 JQGrid 中的一行。通过使用 HtmlHelper 类，JQGrid 完成了动态加载。下面给出一个例子，如下所示

  public static MvcHtmlString CreateSubGrid<T>(this HtmlHelper helper,      
                                                    GridViewModel<T> model)
 {

     htmlBuilder.AppendFormat(@"<table id=""{0}"" class=""scroll""    
       cellpadding=""0"" cellspacing=""0""></table>", model.Id);
     htmlBuilder.AppendFormat(@"<div id=""{0}Pager"" class=""scroll"" 
                         style=""text-align:center;""></div>", model.Id);

     htmlBuilder.AppendFormat(@"<script type=""text/javascript"">");
    .....
    .....

我的视图模型包含七列，其中第 7 列名称是“IsClosed”。如果此列包含“是”或任何值，则整行应该是不可编辑的。而且我不知道怎么做。所以请任何人帮助我。

我的视图模型正在跟随，

public class OBRAccountViewModel 
{
    [JQGridColumn(IsHidden = true)]
    public virtual long OBRBankSeq { get; set; }

    [JQGridColumn(IsHidden = true)]
    public virtual long OBRSeq { get; set; }

    [JQGridColumn(Name = "Overseas Account No", Index = "{0}", Width = 145, IsSearch = true)]
    public virtual string OverSeasAccountNo { get; set; }

    [JQGridColumn(Name = Constants.DisplayName.BeneficiaryBank, Index = "{0}", Width = 130, IsSearch = true)]
    public virtual string BeneficiaryBank { get; set; }

    [JQGridColumn(Name = Constants.DisplayName.CurrencyCode, Index = "{0}", Width = 130, IsSearch = true)]
    public virtual string CurrencyCode { get; set; }     

    [JQGridColumn(Name = Constants.DisplayName.AccountClosureDate, Index = "{0}", Width = 130, IsSearch = true,IsEditable=true)]
    public virtual DateTime? ClosureDate { get; set; }

    [JQGridColumn(Name = Constants.DisplayName.AccountClosureRemarks, Index = "{0}", Width = 250, IsSearch = true, IsEditable = true)]
    public virtual string ClosureRemarks { get; set; }

    [JQGridColumn(Name = "IsClosed", Index = "{0}", Width = 250, IsSearch = true, IsEditable = true,IsHidden=false)]
    public virtual string IsClosed { get; set; }    

}

Answer 1

如果IsClosed 包含"Yes"，我建议您使用rowattr 添加类"ui-state-disabled ui-jqgrid-disablePointerEvents"。请参阅the old answer，我在其中描述了该方法。不要忘记使用gridview: true 选项以获得额外的性能优势。看看

gridview: true,
rowattr: function (rd) {
    if (rd.IsClosed === "Yes") { // verify that the testing is correct in your case
        return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
    }
}

如果您使用最新版本的free jqGrid，则ui.jqgrid.css 包含CSS 规则

.ui-jqgrid-disablePointerEvents {
    pointer-events: none;
}

如果您在旧版本的 jqGrid 上使用其他 fork，那么您应该手动添加上述角色。

顺便说一句，您可以从代码中删除带有class=""scroll"" cellpadding=""0"" cellspacing=""0"" 和class=""scroll"" style=""text-align:center;"" 的部分。多年来，该设置已被弃用。 jqGrid 不要在内部使用 scroll 类，如果存在就删除它。