当然可以,cellTemplate是column的一个属性,你可以在任何时间任意地方给这个属性赋值,生成你想要的效果,示例代码如下:
- // 直接设置
- var col = theGrid.columns[3];
- col.cellTemplate = CellMaker.makeLink({
- text: 'Visit <b>${item.country}</b>',
- href: '${item.url}',
- attributes: {
- target: '_blank',
- rel: 'noopener noreferrer',
- tabIndex: -1
- }
- // no need for click handler, the link navigates automatically
- });
复制代码
完整代码如下:
- import 'bootstrap.css';
- import '@grapecity/wijmo.styles/wijmo.css';
- import './styles.css';
- import { CellMaker } from '@grapecity/wijmo.grid.cellmaker';
- import { FlexGrid } from '@grapecity/wijmo.grid';
- import { getData, getCountries } from './data';
- document.readyState === 'complete' ? init() : window.onload = init;
- function init() {
- var theGrid = new FlexGrid('#theGrid', {
- showMarquee: true,
- selectionMode: 'MultiRange',
- autoGenerateColumns: false,
- columns: [
- { binding: 'id', header: 'ID', isReadOnly: true, width: 80 },
- { binding: 'country', header: 'Country', dataMap: getCountries() },
- // link with bound text and no href (uses click event)
- {
- header: 'Simple Link',
- binding: 'country',
- cellTemplate: CellMaker.makeLink({
- click: (e, ctx) => alert('Clicked Link ** ' + ctx.item.country + ' **')
- })
- },
- // link with fixed text and bound href
- {
- header: 'Real Link',
- binding: 'country'
- }
- ],
- itemsSource: getData(1000)
- });
- // 直接设置
- var col = theGrid.columns[3];
- col.cellTemplate = CellMaker.makeLink({
- text: 'Visit <b>${item.country}</b>',
- href: '${item.url}',
- attributes: {
- target: '_blank',
- rel: 'noopener noreferrer',
- tabIndex: -1
- }
- // no need for click handler, the link navigates automatically
- });
- }
复制代码
测试地址:
https://www.grapecity.com/wijmo/ ... r/Hyperlinks/purejs |