javascript - Jqgrid - 如何更改禁用/灰色文本颜色

Question

我有一个 jqgrid 复选框，它是灰色的。如何将灰色文本的颜色更改为更暗且肉眼可见的颜色？

这是我的代码和下面的 fiddle

FIDDLE

  $("#output").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    rowattr: function (item) {
        var ratio = parseInt(item.LTVRatio, 10);
        if (item.TotalValue < 500000 || ratio < 45) {
            return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
        }
    },
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'Symbol',
        width: 65,
        formatter: "showlink",
        formatoptions: {
          baseLinkUrl: "http://www.cnn.com",
          idName: "",
          addParam: function(options) {
            return {
              bankid: options.rowData.Symbol,
              timePeriod: options.rowData.ShareQuantity
            };
          }
        }
      }, {
        name: 'Description',
        width: 165
      }, {
        name: 'ShareQuantity',
        align: 'right',
        width: 85,
        classes: "hidden-xs",
        labelClasses: "hidden-xs",
        formatter: 'currency',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'SharePrice',
        label: 'Share Price',
        align: 'right',
        width: 100,
        classes: "hidden-xs",
        labelClasses: "hidden-xs",
        template: "number",
        formatoptions: {
          prefix: " $",
          decimalPlaces: 4
        }
      },
      /*{ label: 'Value1', 
                  name: 'Value1', 
                  width: 80, 
                  sorttype: 'number', 
                  formatter: 'number',
                  align: 'right'
              }, */
      {
        name: 'TotalValue',
        label: 'Total Value',
        width: 160,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }, {
        name: 'LTVRatio',
        label: 'LTV Ratio',
        width: 70,
        sorttype: 'number',
        align: "right",
        formatter: 'percentage',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'LTVCategory',
        label: 'LTV Category',
        classes: "hidden-xs",
        labelClasses: "hidden-xs",
        width: 120,
        width: 165
      },

      {
        name: 'MaxLoanAmt',
        label: 'MaxLoanAmount',
        width: 165,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }

    ],
    additionalProperties: ["Num1"],
    /*beforeProcessing: function (data) {
        var item, i, n = data.length;
        for (i = 0; i < n; i++) {
            item = data[i];
            item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
            item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
            item.Value = parseFloat($.trim(item.Value).replace(",", ""));
            item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
            item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
        }
    }, */
    iconSet: "fontAwesome",
    multiselect: true,
    loadonce: true,
    rownumbers: true,
    cmTemplate: {
      autoResizable: true,
      editable: true
    },
    autoresizeOnLoad: true,
    autoResizing: {
      resetWidthOrg: true,
      compact: true
    },
    autowidth: true,
    height: 'auto',
    forceClientSorting: true,
    sortname: "Symbol",
    footerrow: true,
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",


    loadComplete: function() {
      var $self = $(this),
        sum = $self.jqGrid("getCol", "Price", false, "sum"),
        sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
      //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
      $self.jqGrid("footerData", "set", {
        LTVCategory: "Max Approved Loan Amount:",
        Price: sum,
        MaxLoanAmt: sum1
      });
    }
  });


  $("#selectAll").click(function() {
    $("#output").jqGrid('resetSelection');
    var ids = $("#output").jqGrid('getDataIDs');
    for (var i = 0, il = ids.length; i < il; i++) {
      $("#output").jqGrid('setSelection', ids[i], true);
    }
  });

  $("#clear").click(function() {
    $("#output").jqGrid('resetSelection');
  });

  /***********************/
  $("#getSelected").click(function() {
    debugger;
    var ids = $("#output").jqGrid('getGridParam', 'selarrrow');
    if (ids.length > 0) {
      var names = [];
      for (var i = 0, il = ids.length; i < il; i++) {
        var name = $("#output").jqGrid('getCell', ids[i], 'Symbol');
        names.push(name);
      }
      //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", "));
      $("#names").html(names.join(", "));
      $("#dialog-confirm").dialog({
        height: 280,
        modal: true,
        buttons: {
          Cancel: function() {
            $(this).dialog('close');
          },
          Confirm: function() {
            alert("Confirm");
            //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", "));
            /*$.ajax({
                type: "POST",
                url:  "/cpsb/unprocessedOrders.do",
                data: { method: "releaseTowics",
                    orderNum: JSON.stringify(ids),
                    names: JSON.stringify(names)
                },
                dataType: "json"
                success: function(msg){
                    alert(msg);
                },
                error: function(res, status, exeption) {
                    alert(res);
                }
            });*/
          }
        }
      });
    }
  });
  /***********************/
  $("#output").jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: "cn"
  });


  $(window).on("resize", function() {
    var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
    $("#output").jqGrid("setGridWidth", newWidth, true);
  });
});

Answer 1

以下 jQuery UI CSS 规则将应用于禁用的行:

.ui-state-disabled, .ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: 0.35;
    background-image: none;
}

您可以增加不透明度值，例如使用CSS规则更改文本颜色，如下所示:

.ui-jqgrid.ui-widget-content .ui-state-disabled {
    opacity: .40;
    filter: Alpha(Opacity=40);
    color: blue;
}

网格的第一列使用格式化程序:“showlink”。因此你应该添加例如

.ui-jqgrid.ui-widget-content .ui-state-disabled a {
    color: blue;
}

如果您还需要更改列中文本的颜色。最终结果可以在修改后的演示中看到:https://jsfiddle.net/615qovew/130/