Question

我正在使用Syncfusion网格显示表格数据的Webapp上工作。我的要求之一是将列数据显示为链接，并在用户单击它时调用一个函数。

我已经遍历了Syncfusion's official website上syncfusion提供的教程

以下是我试图达到文档中所述要求的方法：

 <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right">
            <ng-template e-template let-data>
                    <div>
                        <a style="padding-left:5px !important;"> {{data.OrderID}} </a>
                    </div>
                </ng-template>

但是到目前为止没有成功。这是我的package.json

"@angular/common": "~5.1.2",
"@angular/compiler": "~5.1.2",
"@angular/core": "~5.1.2",
"@angular/forms": "~5.1.2",
"@angular/http": "~5.1.2",
"@angular/platform-browser": "~5.1.2",
"@angular/platform-browser-dynamic": "~5.1.2",
"@angular/router": "~5.1.2",
"core-js": "^2.4.1",
"rxjs": "^5.4.3",
"zone.js": "^0.7.4",
"bootstrap": "^3.3.6",
"jquery": "~3.2.1",
"jsrender": "~0.9.84",
"syncfusion-javascript": "^15.4.17",
"ej-angular2": "^15.4.18"

有人可以帮我吗？

Answer 1

我们已经使用ejGrid的ColumnTemplate功能实现了您的要求。请参考下面的代码示例。

// HTML File

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData">
    <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right">
            <ng-template e-template let-data> 
                <div *ngIf="data.OrderID"> 
                    <a style="padding-left:5px !important;" (click)="clicked($event)">Click</a> 
                </div> 
                </ng-template>
        </e-column>
        ……..
    </e-columns>
</ej-grid>

// Ts File

export class GridComponent {
    public gridData: any;
    constructor() {
    ……………
    }
    clicked(e:any){
        alert("link column clicked"); // Do your stuff here.
    }
}

请参阅演示示例here

请参考我们的帮助documentation供您参考

Syncfusion Grid：无法将列数据显示为链接

1 个答案: