设置首列宽度
你好,行头列的集合用这句代码可以访问到 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]