Syncfusion 网格：无法将列数据显示为 Link

Question

我正在开发使用 Syncfusion 网格显示表格数据的 Webapp。我的要求之一是将列数据显示为 link 并在用户单击它时调用函数。

我已经完成了 syncfusion 在 Syncfusion's official website

提供的教程

我正在尝试按照文档中所述的方式实现要求：

 <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 网格：无法将列数据显示为 Link

Syncfusion Grid : Not able to show Column Data as Link

datagrid

syncfusion

angular