ColumnFixing功能在igGrid中不起作用

时间:2017-01-19 08:20:50

标签: jquery infragistics ignite-ui iggrid

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

>>> import datetime
>>> dates = [['2017','01','15'], ['2017','01','14'], ['2017','01','13']]
>>> for date in dates:
...     # using map, produces a date
...     date_cand = datetime.date(*map(int, date))
...     print(date_cand, (datetime.date.today() - date_cand).days)
...     # using datetime.datetime.strptime, produces a datetime
...     date_cand = datetime.datetime.strptime("-".join(date), "%Y-%m-%d")
...     print(date_cand, (datetime.date.today() - date_cand.date()).days)
...
2017-01-15 4
2017-01-15 00:00:00 4
2017-01-14 5
2017-01-14 00:00:00 5
2017-01-13 6
2017-01-13 00:00:00 6
$(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>

如果我使用minimalVisibleAreaWidth:96,网格将被渲染。如果我进一步增加值,则会抛出错误。

请帮忙

1 个答案:

答案 0 :(得分:1)

在计算固定列的可用宽度时,igGrid包含垂直滚动条宽度。在Windows中,滚动条的宽度为17px,因此如果将这些添加到计算中,网格将不会抛出错误。

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