【问题标题】:Highlight the entire row if there is no data in a Single Column in jqxgrid如果 jqxgrid 中的单列中没有数据,则突出显示整行
【发布时间】:2015-03-10 07:57:20
【问题描述】:

我的要求是:

如果 jqx 网格中至少单列中没有数据,我需要突出显示整行,谁能帮帮我?

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) 
{    
 if (value > 2) 
 {
   return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;font-weight:bold;">' + value + '</span>';
 }    
 else 
 {
    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #00000;font-weight:normal;">' + value + '</span>';
 }
};

【问题讨论】:

    标签: javascript jquery jqxgrid jqxwidgets


    【解决方案1】:

    您可以尝试类似的方法:Cells Styling。该示例显示条件单元格格式。在您的情况下,您必须为所有 Grid 列实现“cellclassname”功能。通过这样做,您将能够实现条件行格式化。

    【讨论】:

      【解决方案2】:

      如果你通过cellclassname 路线,你可以试试这样:

      var cellClass = function(gridId, highlightClass) {
          highlightClass = highlightClass || 'default';
          return function(row, columnfield, value) {
              return hasEmptyCell(gridId, row) ? highlightClass : '';
              // where hasEmptyCell is a function that checks if a row has an empty cell
          };
      };
      
      var cols = [
          { text: 'Product Name', datafield: 'ProductName', width: 250 },
          { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
          { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
          { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
          { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
      ];
      
      for (var i in cols) {
          cols[i].cellclassname = cellClass('#test-grid', 'highlighted');
      }
      
      // then initialize jqxGrid using cols
      $("#jqxgrid").jqxGrid({
          columns: cols
          /* ... other properties */
      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-05-10
        • 1970-01-01
        • 2014-02-18
        • 1970-01-01
        • 1970-01-01
        • 2016-05-07
        • 2019-02-21
        • 1970-01-01
        相关资源
        最近更新 更多