wijmo 中的grid

登录

angularjs2 ts 编码模式下如何在grid中的一列中显示<a>标签超链接

JeffryLI · JeffryLI

您好，您可以使用慢板工具来实现这样的功能，我给您提供部分示例代码，请参照：

// template for "Template" cells
var theTemplate = '<a>操作</a>';
// grid with template
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country' },
{ binding: 'template', header: 'Template', width: 130, isReadOnly: true },
{ binding: 'sales', header: 'Sales', format: 'n2' },
{ binding: 'expenses', header: 'Expenses', format: 'n2' }
],
itemsSource: getData(),
showAlternatingRows: false,
formatItem: function(s, e) {
if (e.panel == s.cells && s.columns[e.col].binding == 'template') {
var item = s.rows[e.row].dataItem,
html = wijmo.format(theTemplate, item);
e.cell.innerHTML = html;
}
}
});

复制代码

小葱儿 · 小葱儿

JeffryLI 发表于 2017-6-12 10:44
您好，您可以使用慢板工具来实现这样的功能，我给您提供部分示例代码，请参照：

现在我代码是这么写的,该怎么处理操作列是个a标签
html:

               <wj-flex-grid [itemsSource]="cvFilter" [allowSorting]="true" style="width:100%;">
                                 <wj-flex-grid-column [header]="'报警来源'" [binding]="'C1'" [width]="'*'"></wj-flex-grid-column>
                                 <wj-flex-grid-column [header]="'位置名称'" [binding]="'C2'" [width]="'*'"></wj-flex-grid-column>
                                 <wj-flex-grid-column [header]="'状态'" [binding]="'C3'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column>
                                 <wj-flex-grid-column [header]="'发生时间'" [binding]="'C4'" [width]="'*'"></wj-flex-grid-column>
                                 <wj-flex-grid-column [header]="'警情描述'" [binding]="'C5'" [width]="'*'"></wj-flex-grid-column>
                                 <wj-flex-grid-column [header]="'处理方式'" [binding]="'C6'" [width]="'*'"></wj-flex-grid-column>
                                 <wj-flex-grid-column [header]="'操作'" [binding]="'C7'" [width]="'*'"></wj-flex-grid-column>
                              </wj-flex-grid>
                        </div>

js
this.cvFilter = new wjcCore.CollectionView(this.dataSvc.getData(50));

JeffryLI · JeffryLI

您好，您使用的是Angular2 ,我给你一份参考文档http://demos.wijmo.com/5/Angular ... /CellTemplateIntro/里面介绍了各种的模板定义。

小葱儿 · 小葱儿

JeffryLI 发表于 2017-6-15 16:32
您好，您使用的是Angular2 ,我给你一份参考文档http://demos.wijmo.com/5/Angular2/CellTemplateIntro/Cell ...

我不明白我这么写为什么不对,加上
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<div>
<img src="minus.png" /> {{cell.item.C7}}
</div>
</template>

就错了,不加就对

<wj-flex-grid [itemsSource]="cvFilter" [allowSorting]="true" style="width:100%;">
<wj-flex-grid-column [header]="'报警来源'" [binding]="'C1'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'位置名称'" [binding]="'C2'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'状态'" [binding]="'C3'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'发生时间'" [binding]="'C4'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'警情描述'" [binding]="'C5'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'处理方式'" [binding]="'C6'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'操作'" [binding]="'C7'" [width]="'*'">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<div>
<img src="minus.png" /> {{cell.item.C7}}
</div>
</template>
</wj-flex-grid-column>
</wj-flex-grid>

JeffryLI · JeffryLI

您好，这个目前不能判断出您的问题，能不能提供个简单的能说明问题的demo给我，我帮您看一下原因吧！

		自动登录	找回密码
密码			立即注册

wijmo 中的grid

本帖子中包含更多资源

5 个回复

本帖子中包含更多资源

元老葡萄