wss. 发表于 2020-8-27 17:52:19

设置首列宽度


KevinChen 发表于 2020-8-27 18:32:16

你好,行头列的集合用这句代码可以访问到 theFirstGrid.rowHeaders.columns,

因此可以通过它对列宽进行设置,列数进行调整,参考完整代码:

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import { FlexGrid, Column } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    // generate some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
    for (var i = 0; i < countries.length; i++) {
      data.push({
            country: countries,
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
      });
    }
    // grid with extra fixed column and auto-generated scrollable columns
    var theFirstGrid = new FlexGrid('#theFirstGrid');
    theFirstGrid.rowHeaders.columns.width = 200;
    theFirstGrid.rowHeaders.columns.push(new Column()); // extra fixed column
    theFirstGrid.itemsSource = data; // auto-generate scrollable columns
    // grid with no fixed columns and custom scrollable columns
    var theSecondGrid = new FlexGrid('#theSecondGrid');
    theSecondGrid.rowHeaders.columns.splice(0, 1); // no extra columns
    theSecondGrid.autoGenerateColumns = false; // custom scrollable columns
    theSecondGrid.itemsSource = data;
    var cols = theSecondGrid.columns;
    cols.push(new Column({ binding: 'country', header: 'Country' }));
    cols.push(new Column({ binding: 'sales', header: 'Sales' }));
    cols.push(new Column({ binding: 'expenses', header: 'Expenses' }));
}


地址:https://demo.grapecity.com.cn/wijmo/demos/Grid/Columns/Collections/purejs

完整替换app.js即可看到效果
页: [1]
查看完整版本: 设置首列宽度