igGrid コードで列を固定する方法

igGrid の初期化時に列を固定する方法

igGrid の列固定機能(ColumnFixing) の columnSettings から、固定する列の isFixed オプションを true に設定します。

$('#grid1').igGrid({
    columns: [
        { headerText: 'ID', key: 'ID', dataType: 'string', width: '100px' },
        { headerText: '会社名', key: 'CompanyName', dataType: 'string', width: '250px' },
        { headerText: '名前', key: 'ContactName', dataType: 'string', width: '200px' },
        { headerText: '連絡先', key: 'ContactTitle', dataType: 'string', width: '200px' },
        { headerText: '住所', key: 'Address', dataType: 'string', width: '200px' },
        { headerText: '市', key: 'City', dataType: 'string', width: '150px' },
        { headerText: '国名', key: 'Country', dataType: 'string', width: '150px' }
    ],
    dataSource: ds,
    width: '1000px',
    height: '400px',
    primaryKey: 'ID',
    features: [
        {
            name: 'ColumnFixing',
            columnSettings: [
                {
                    columnKey: 'ID',
                    isFixed: true
                }
            ]
        }
    ]
});

igGrid の列を動的に固定する方法

igGrid の列固定機能(ColumnFixing) の fixColumn メソッドに、固定する列のキーを指定します。

$('#button1').on('click', function() {
    $('#grid1').igGridColumnFixing('fixColumn', 'CompanyName');
})