列宽

此示例显示如何使用XAML样式的星形大小调整来实现使用FlexGrid的灵活布局。星号大小在Column对象的width属性中指定。

星号大小类似于百分比大小,但值不必加起来一百。宽度“3 *”表示“比1 *宽三倍”。用于计算布局的总大小是控件的当前宽度减去任何非星形列的宽度除以指定的星数。

您可以使用星号调整来实现最后一列扩展的网格,以填充所有可用空间。为此,只需将最后一个colunm的宽度设置为*。您可能还需要设置最后一列的minWidth属性,以防止它变得太窄。

请注意,列的minWidth和maxWidth属性也会影响布局计算。您可以通过调整窗口大小来调整每个样本中的整个网格。

这些示例使用WjFlexGridWjFlexGridColumn

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { getData } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { let data = getData(50); let theFirstGrid = new FlexGrid('#theFirstGrid', { itemsSource: data, columns: [{ binding: 'start', header: 'Date', width: 80, minWidth: 40, maxWidth: 160 }, { binding: 'product', header: 'Product', width: '2*', allowResizing: false }, { binding: 'amount', header: 'Revenue', format: 'n0', width: '*', allowResizing: false }, { binding: 'amount2', header: 'Expense', format: 'n0', width: '*', allowResizing: false }] }); let theSecondGrid = new FlexGrid('#theSecondGrid', { itemsSource: data, columns: [{ binding: 'start', header: 'Date', width: 80 }, { binding: 'product', header: 'Product', width: '*', minWidth: 100, allowResizing: false }, { binding: 'amount', header: 'Revenue', format: 'n0', width: 120 }] }); let theThirdGrid = new FlexGrid('#theThirdGrid', { itemsSource: data, columns: [{ binding: 'start', header: 'Date', width: '*' }, { binding: 'product', header: 'Product', width: '*', minWidth: 100 }, { binding: 'amount', header: 'Revenue', format: 'n0', width: '*' }, { binding: 'amount2', header: 'Expense', format: 'n0', width: '*' }] }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column Width</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h4> Example 1:</h4> <p> This grid has four columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be resized using the mouse. </p> <p> Notice that the second column is twice as wide as the third and fourth columns, and that they keep these proportions even as you resize the first column or the whole grid.</p> <div id="theFirstGrid"></div> <br /> <br /> <h4> Example 2:</h4> <p> This grid shows how you can make any column stretch to fill the available space. In this case, we set the width of the second column to * to achieve that effect.</p> <p> We also set the minimum width of the second column to 100 pixels in order to prevent it from getting too narrow when the other columns in the grid are resized, and we prevent users from resizing this column with the mouse.</p> <div id="theSecondGrid"></div> <br /> <br /> <h4> Example 3:</h4> <p> This example sets all widths to *, which means the space available is divided equally among them. Resize the browser and notice how the grid resizes and the columns fill it up equally. </p> <p> Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both.</p> <div id="theThirdGrid"></div> </div> </body> </html> import { CollectionView } from '@grapecity/wijmo'; let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; let products = ['Widget', 'Gadget', 'Doohickey']; let colors = ['Black', 'White', 'Red', 'Green', 'Blue']; // generate some random data export function getData(count) { let data = []; let dt = new Date(); // add count items for (let i = 0; i < count; i++) { // constants used to create data items let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); // create the item let item = { id: i, start: date, end: date, country: countries[countryId], product: products[productId], color: colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0, }; // add an array (should not auto-bind) item.sales = []; for (var j = 0; j < 12; j++) { item.sales.push(50 + 20 * (Math.random() - .5) + j); } // add an object (should not auto-bind) item.someObject = { name: i, value: i }; // add the item to the list data.push(item); } // return a CollectionView so multiple controls bound to this source // will be updated automatically (TFS 145538) return new CollectionView(data); } .wj-flexgrid { height: 400px; margin: 6px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import * as wjcGrid from '@grapecity/wijmo.grid'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { protected dataSvc: DataService; data: any[]; // references FlexGrid named 'flex' in the view @ViewChild('flex') flex: wjcGrid.FlexGrid; // DataSvc will be passed by derived classes constructor( @Inject(DataService) dataSvc: DataService) { this.dataSvc = dataSvc; this.data = dataSvc.getData(500); } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column Width</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <h4> Example 1: </h4> <p> This grid has four columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be resized using the mouse. </p> <p> Notice that the second column is twice as wide as the third and fourth columns, and that they keep these proportions even as you resize the first column or the whole grid. </p> <wj-flex-grid class="grid" [itemsSource]="data"> <wj-flex-grid-column [header]="'Date'" [binding]="'start'" [width]="80" [minWidth]="40" [maxWidth]="160"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Product'" [binding]="'product'" [width]="'2*'" [allowResizing]="false"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="'*'" [allowResizing]="false"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Expense'" [binding]="'amount2'" [format]="'n0'" [width]="'*'" [allowResizing]="false"></wj-flex-grid-column> </wj-flex-grid> <br /> <br /> <h4> Example 2: </h4> <p> This grid shows how you can make any column stretch to fill the available space. In this case, we set the width of the second column to * to achieve that effect. </p> <p> We also set the minimum width of the second column to 100 pixels in order to prevent it from getting too narrow when the other columns in the grid are resized, and we prevent users from resizing this column with the mouse. </p> <wj-flex-grid class="grid" [itemsSource]="data"> <wj-flex-grid-column [header]="'Date'" [binding]="'start'" [width]="80"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Product'" [binding]="'product'" [width]="'*'" [minWidth]="100" [allowResizing]="false"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="120"></wj-flex-grid-column> </wj-flex-grid> <br /> <br /> <h4> Example 3: </h4> <p> This example sets all widths to *, which means the space available is divided equally among them. Resize the browser and notice how the grid resizes and the columns fill it up equally. </p> <p> Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both. </p> <wj-flex-grid class="grid" [allowResizing]="'None'" [itemsSource]="data"> <wj-flex-grid-column [header]="'Date'" [binding]="'start'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Product'" [binding]="'product'" [width]="'*'" [minWidth]="100"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Expense'" [binding]="'amount2'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; @Injectable() export class DataService { // data used to generate random items private _products = ['Widget', 'Gadget', 'Doohickey']; private _colors = ['Black', 'White', 'Red', 'Green', 'Blue']; private _someCountries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; getCountries(): string[] { return this._someCountries; } getProducts(): string[] { return this._products; } getColors(): string[] { return this._colors; } // get matches for a search term getData(count: number): any[] { var data = []; var dt = new Date(); // add count items for (var i = 0; i < count; i++) { // constants used to create data items var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * this._someCountries.length), productId = Math.floor(Math.random() * this._products.length), colorId = Math.floor(Math.random() * this._colors.length); // create the item var item = { id: i, start: date, end: new Date(date.getTime() + Math.random() * 30 * (24 * 60 * 60 * 1000)), country: this._someCountries[countryId], product: this._products[productId], color: this._colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0 }; // add the item to the list data.push(item); } return data; } } .wj-flexgrid { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <h4> Example 1: </h4> <p> This grid has four columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be resized using the mouse. </p> <p> Notice that the second column is twice as wide as the third and fourth columns, and that they keep these proportions even as you resize the first column or the whole grid. </p> <wj-flex-grid class="grid" :itemsSource="data"> <wj-flex-grid-column header="Date" binding="start" :width=80 :minWidth=40 :maxWidth=160></wj-flex-grid-column> <wj-flex-grid-column header="Product" binding="product" width="2*" :allowResizing=false></wj-flex-grid-column> <wj-flex-grid-column header="Revenue" binding="amount" width="*" :allowResizing=false></wj-flex-grid-column> <wj-flex-grid-column header="Expense" binding="amount2" format="n0" width="*" :allowResizing=false></wj-flex-grid-column> </wj-flex-grid> <br /> <br /> <h4> Example 2: </h4> <p> This grid shows how you can make any column stretch to fill the available space. In this case, we set the width of the second column to * to achieve that effect. </p> <p> We also set the minimum width of the second column to 100 pixels in order to prevent it from getting too narrow when the other columns in the grid are resized, and we prevent users from resizing this column with the mouse. </p> <wj-flex-grid class="grid" :itemsSource="data"> <wj-flex-grid-column header="Date" binding="start" :width=80></wj-flex-grid-column> <wj-flex-grid-column header="Product" binding="product" width="*" :minWidth=100 :allowResizing=false></wj-flex-grid-column> <wj-flex-grid-column header="Revenue" binding="amount" format="n0" :width=120></wj-flex-grid-column> </wj-flex-grid> <br /> <br /> <h4> Example 3: </h4> <p> This example sets all widths to *, which means the space available is divided equally among them. Resize the browser and notice how the grid resizes and the columns fill it up equally. </p> <p> Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both. </p> <wj-flex-grid class="grid" allowResizing="None" :itemsSource="data"> <wj-flex-grid-column header="Date" binding="start" width="*"></wj-flex-grid-column> <wj-flex-grid-column header="Product" binding="product" width="*" :minWidth=100></wj-flex-grid-column> <wj-flex-grid-column header="Revenue" binding="amount" format="n0" width="*"></wj-flex-grid-column> <wj-flex-grid-column header="Expense" binding="amount2" format="n0" width="*"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wjcGrid from "@grapecity/wijmo.grid"; import { getData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData(500) }; } }); </script> <style> .wj-flexgrid { height: 400px; margin: 6px 0; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> // data used to generate random items var _products = ['Widget', 'Gadget', 'Doohickey']; var _colors = ['Black', 'White', 'Red', 'Green', 'Blue']; var _someCountries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; function getCountries() { return this._someCountries; } function getProducts() { return this._products; } function getColors() { return this._colors; } export function getData(count) { var data = []; var dt = new Date(); // add count items for (var i = 0; i < count; i++) { // constants used to create data items var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * _someCountries.length), productId = Math.floor(Math.random() * _products.length), colorId = Math.floor(Math.random() * _colors.length); // create the item var item = { id: i, start: date, end: new Date(date.getTime() + Math.random() * 30 * (24 * 60 * 60 * 1000)), country: _someCountries[countryId], product: _products[productId], color: _colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0 }; // add the item to the list data.push(item); } return data; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(500) }; } render() { return <div className="container-fluid"> <h4> Example 1: </h4> <p> This grid has four columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be resized using the mouse. </p> <p> Notice that the second column is twice as wide as the third and fourth columns, and that they keep these proportions even as you resize the first column or the whole grid. </p> <wjGrid.FlexGrid itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="Date" binding="start" width={80} minWidth={40} maxWidth={160}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Product" binding="product" width="2*" allowResizing={false}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Revenue" binding="amount" width="*" allowResizing={false}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Expense" binding="amount2" format="n0" width="*" allowResizing={false}></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> <br /> <br /> <h4> Example 2: </h4> <p> This grid shows how you can make any column stretch to fill the available space. In this case, we set the width of the second column to * to achieve that effect. </p> <p> We also set the minimum width of the second column to 100 pixels in order to prevent it from getting too narrow when the other columns in the grid are resized, and we prevent users from resizing this column with the mouse. </p> <wjGrid.FlexGrid itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="Date" binding="start" width={80}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Product" binding="product" width="*" minWidth={100} allowResizing={false}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Revenue" binding="amount" format="n0" width={120}></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> <br /> <br /> <h4> Example 3: </h4> <p> This example sets all widths to *, which means the space available is divided equally among them. Resize the browser and notice how the grid resizes and the columns fill it up equally. </p> <p> Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both. </p> <wjGrid.FlexGrid itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="Date" binding="start" width="*"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Product" binding="product" width="*" minWidth={100}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Revenue" binding="amount" format="n0" width="*"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Expense" binding="amount2" format="n0" width="*"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column Width</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { height: 400px; margin: 6px 0; } // data used to generate random items var _products = ['Widget', 'Gadget', 'Doohickey']; var _colors = ['Black', 'White', 'Red', 'Green', 'Blue']; var _someCountries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; function getCountries() { return this._someCountries; } function getProducts() { return this._products; } function getColors() { return this._colors; } export function getData(count) { var data = []; var dt = new Date(); // add count items for (var i = 0; i < count; i++) { // constants used to create data items var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * _someCountries.length), productId = Math.floor(Math.random() * _products.length), colorId = Math.floor(Math.random() * _colors.length); // create the item var item = { id: i, start: date, end: new Date(date.getTime() + Math.random() * 30 * (24 * 60 * 60 * 1000)), country: _someCountries[countryId], product: _products[productId], color: _colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0 }; // add the item to the list data.push(item); } return data; }