对于 Angular,您可以使用像 uiGrid 这样的模块,就像@Dean Ward(Dean 进展如何?)建议的那样。或者你可以自己做。
C# 代码的核心内容是必要的,可以以某种方式转换为 TypeScript。但不建议这样做。许多实际的数据驱动表构建可以使用现有的 Angular 指令以声明方式完成。
代码的核心根据单元格的类型显示单元格。这可以作为一个简单的包装指令来实现,它将用适当类型的指令替换自身。
对于每种单元格类型,您可以创建一个自定义指令:整数单元格、小数单元格、下拉单元格、布尔单元格...每个单元格都将处理单元格的显示方式以及控件的呈现方式。
然后,您将能够对每列和行使用 ng-repeat,并让包装器指令用自定义类型指令替换自身。
这种方法的另一个优点是您可以更好地分离关注点,遵循开放/封闭原则,并且您的组件只会做一件事。
如果包装器指令使用约定来显示类型指令,则您将来可以添加新类型,而无需打开任何现有组件。
对于 Angular 新手来说,这是一项艰巨的工作。我会同意@Dean Ward 的建议。 Angular 有很多可编辑的网格解决方案。如果 uiGrid 不能满足您的需求,请查看其他现有组件。
UPDATE几个例子
最好的选择仍然是使用现有的网格组件,例如 uiGrid。如果你想自己写这个,我不推荐——这将是一种方法。
function cellInteger(): ng.IDirective {
return {
scope: {data: '='},
controller: 'CellIntegerController',
controllerAs: 'vm',
bindToController,
templateUrl: 'path/to/integer.html'
}
}
gridMobule.directive('cellInteger', cellInteger);
export class CellIntegerController {
public data: CellDataType;
constructor() {}
save(value: number) {
this.data.value = number;
}
}
gridModule.controller('CellIntegerController', CellIntegerController);
在你看来,你会得到类似的东西:
<input
type="number"
class="cell-integer"
ng-model="vm.data.value"
ng-blur="save(vm.data.value)"
</