wijmo 中的grid

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

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

1. 
   
2.         // template for "Template" cells
   
3.         var theTemplate = '<a>操作</a>';
   
4. 
   
5.         // grid with template
   
6.         var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
   
7.            autoGenerateColumns: false,
   
8.     columns: [
   
9.             { binding: 'country', header: 'Country' },
   
10.       { binding: 'template', header: 'Template', width: 130, isReadOnly: true },
    
11.       { binding: 'sales', header: 'Sales', format: 'n2' },
    
12.       { binding: 'expenses', header: 'Expenses', format: 'n2' }
    
13.     ],
    
14.           itemsSource: getData(),
    
15.     showAlternatingRows: false,
    
16.                 formatItem: function(s, e) {
    
17.             if (e.panel == s.cells && s.columns[e.col].binding == 'template') {
    
18.               var item = s.rows[e.row].dataItem,
    
19.                               html = wijmo.format(theTemplate, item);
    
20.                           e.cell.innerHTML = html;
    
21.       }
    
22.     }
    
23.         });

复制代码

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));

您好，您使用的是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>

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