1

我在 infragistics 16.2 版本中使用网格。

$(function() {
  var options = {
    "columns": [{
      "headerText": "<span class='text-center header prewrap' attrcol='false'title='Product'>Product<\/span>",
      "key": "C0",
      "width": 246,
      "actualWidth": 246
    }, {
      "headerText": "<span class='text-center header'  data-uid=C1;C2;C3 title='Dollar Sales'>Dollar <br/>Sales<\/span>",
      "key": "C1C2C3",
      "width": 114,
      "oheaderText": "Dollar Sales"
    }],
    "alternateRowStyles": false,
    "enableHoverStyles": false,
    "autoGenerateColumns": false,
    "virtualizationMode": "continuous",
    "avgRowHeight": 32,
    "autofitLastColumn": false,
    "width": "360px",
    "rowVirtualization": false,
    "height": "100%",
    "features": [{
      "name": "ColumnFixing",
      "showFixButtons": false,
      "fixingDirection": "left",
      "minimalVisibleAreaWidth": 150,
      "columnSettings": [{
        "columnKey": "C0",
        "isFixed": true,
        "allowFixing": false
      }, {
        "columnKey": "C1C2C3",
        "isFixed": false,
        "allowFixing": false
      }]
    }],
    "gridPageInfo": {
      "currentRowPageNum": 1,
      "currentColPageNum": 1,
      "totalRowPage": 1,
      "totalColPage": 1,
      "rowPerPage": 250,
      "colPerPage": 2147483647
    },
    "dataSource": [{
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R1' dimname='Product' data-status='collapsed'  title='AISLE-CARBONATED SOFT DRINKS'  style=\"padding-left:0px\">AISLE-CARBONATED SOFT DRINKS<\/span>",
      "C1C2C3": "<span rawval='400263603.33634156' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$400,263,603' style=\"\">$400,263,603<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R2' dimname='Product' data-status='collapsed'  title='AISLE-COFFEE & TEA'  style=\"padding-left:0px\">AISLE-COFFEE & TEA<\/span>",
      "C1C2C3": "<span rawval='237118864.48523393' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$237,118,864' style=\"\">$237,118,864<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R3' dimname='Product' data-status='collapsed'  title='AISLE-DRINK MIXES'  style=\"padding-left:0px\">AISLE-DRINK MIXES<\/span>",
      "C1C2C3": "<span rawval='34350880.31351226' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$34,350,880' style=\"\">$34,350,880<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R4' dimname='Product' data-status='collapsed'  title='AISLE-JUICES'  style=\"padding-left:0px\">AISLE-JUICES<\/span>",
      "C1C2C3": "<span rawval='129576492.33320642' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$129,576,492' style=\"\">$129,576,492<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R5' dimname='Product' data-status='collapsed'  title='AISLE-NON-FRUIT DRINKS'  style=\"padding-left:0px\">AISLE-NON-FRUIT DRINKS<\/span>",
      "C1C2C3": "<span rawval='13803085.046566382' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$13,803,085' style=\"\">$13,803,085<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R6' dimname='Product' data-status='collapsed'  title='AISLE-SPORTS/ENERGY DRINKS'  style=\"padding-left:0px\">AISLE-SPORTS/ENERGY DRINKS<\/span>",
      "C1C2C3": "<span rawval='238951247.71143132' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$238,951,248' style=\"\">$238,951,248<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R7' dimname='Product' data-status='collapsed'  title='AISLE-WATER'  style=\"padding-left:0px\">AISLE-WATER<\/span>",
      "C1C2C3": "<span rawval='169492202.71100083' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$169,492,203' style=\"\">$169,492,203<\/span>"
    }]
  }
  $("#test").igGrid(options);


});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

<link rel="stylesheet" href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"></link>
<link rel="stylesheet" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css"></link>
<table id="test"></table>

它抛出以下错误

VM509 infragistics.lob.js:159 Uncaught Error: Initial fixing could not be applied for column with key: C0. Reason: This column cannot be fixed. Its width exceeds the available space for fixing a column in the grid.

如果我使用 minimumVisibleAreaWidth : 96，则网格将被渲染。如果我进一步增加该值，则会引发错误。

请帮忙

4

1 回答 1

1

igGrid 在计算固定列的可用宽度时包括垂直滚动条宽度。在 Windows 中，滚动条的宽度为 17 像素，因此如果将它们添加到计算中，网格将不会引发错误。

在您的情况下，您已将网格高度设置为 100%，并且不会有垂直滚动条，因此网格不应考虑它。这是您应该向 Infragistics Support 报告的问题。

于 2017-01-20T17:08:31.607 回答