Angular Js+ TypeScript:如何创建动态表 [英] Angular Js+ TypeScript: How to create a Dynamic table
问题描述
我是 typescript 和 angular 的新手.我已经使用 typescript 和 angular js 实现了一个模块.在其中我需要创建一个动态表，它将获取演示文稿的类型并相应地附加到我的视图中，就像我之前在 C# 中所做的那样.我在下面给出了我的 c# 代码:
I am new to typescript and angular.I have implemented a module using typescript and angular js. In which i need to create a dynamic table which will fetch the type of presentation and accordingly append to my view as previously i have done in C#.My c# code i have given below:
private void ShowCustomFields()
{
Customer.CustomerController control = new Customer.CustomerController();
DataTable fields = control.GetCustomFields();
TableRow row = new TableRow();
Int16 count = 0;
foreach (DataRow dr in fields.Rows)
{
count++;
string id = dr["Id"].ToString();
string name = dr["Name"].ToString();
string type = dr["Type"].ToString();
string val = "";
//Determine if the user can view/edit this custom field
bool canEdit = false;
if (Permissions.PermissionController.HasPermission(this.UserInfo.Username, "Custom Fields - Customer",
dr["Name"].ToString(),
Permissions.PermissionLevels.Edit))
{
canEdit = true;
}
TableCell cellId = new TableCell();
cellId.Visible = false;
cellId.EnableViewState = true;
cellId.Text = id;
TableCell cellName = new TableCell();
cellName.Text = name + ": ";
cellName.Width = 150;
cellName.EnableViewState = true;
TableCell cellControl = new TableCell();
cellControl.EnableViewState = true;
TextBox tb = new TextBox();
if (!canEdit)
{
tb.Enabled = false;
}
tb.TabIndex = (Int16)(1000 + count);
RangeValidator r = new RangeValidator();
switch (type)
{
case "Text":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
break;
case "Integer":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
r.ControlToValidate = tb.UniqueID;
r.Type = ValidationDataType.Integer;
r.MinimumValue = Int32.MinValue.ToString();
r.MaximumValue = Int32.MaxValue.ToString();
r.ErrorMessage = "Invalid Integer";
cellControl.Controls.Add(r);
break;
case "Decimal":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
r.ControlToValidate = tb.UniqueID;
r.Type = ValidationDataType.Double;
r.MinimumValue = "-1000000000000";
r.MaximumValue = "1000000000000";
r.ErrorMessage = "Invalid Decimal";
cellControl.Controls.Add(r);
break;
case "Date":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
r.ControlToValidate = tb.UniqueID;
r.Type = ValidationDataType.Date;
r.MinimumValue = "1/1/1900";
r.MaximumValue = "12/31/3000";
r.ErrorMessage = "Invalid Date";
cellControl.Controls.Add(r);
break;
case "TrueFalse":
CheckBox cb = new CheckBox();
if (val.ToUpper().Equals("TRUE"))
{
cb.Checked = true;
}
cb.EnableViewState = true;
cb.CssClass = "NormalTextBox";
cb.TabIndex = (Int16)(1000 + count);
cellControl.Controls.Add(cb);
break;
case "DropdownList":
DropDownList ddl = new DropDownList();
Vbos.Maintenance.MaintenanceController mcon = new Vbos.Maintenance.MaintenanceController();
ddl.DataSource = mcon.GetTypeItems("CF_" + name);
ddl.DataTextField = "Description";
ddl.DataValueField = "ShortDescription";
ddl.DataBind();
ListItem li = new ListItem();
li.Text = "--Select--";
li.Value = "-1";
li.Selected = true;
ddl.Items.Insert(0, li);
if (ddl.Items.FindByValue(val) != null)
{
ddl.SelectedIndex = -1;
ddl.Items.FindByValue(val).Selected = true;
}
cellControl.Controls.Add(ddl);
break;
}
row.Cells.Add(cellId);
row.Cells.Add(cellName);
row.Cells.Add(cellControl);
row.EnableViewState = true;
tableCustomFields.Rows.Add(row);
//if( count%2 == 0 )
//{
row = new TableRow();
//}
tableCustomFields.EnableViewState = true;
}
}
如您所见，我可以根据类型获取数据.如何使用 Angular Js 实现相同的功能，并想知道如何将这些值与我的 ng-model 绑定.
As you can see i can fetching data on the basis of type.How can i implement the same using Angular Js and want to know how can i bind these values with my ng-model too.
推荐答案
使用 Angular，您可以使用像 @Dean Ward(Dean Ward(最近怎么样?)建议的 uiGrid 这样的模块).或者你可以自己做.
With Angular you could use a module like uiGrid like @Dean Ward (how's it going Dean?) suggests. Or you could do it yourself.
您的 C# 代码的内容是命令式的，可以以某种方式转换为 TypeScript.但这不会被推荐.许多实际的数据驱动表构建可以使用现有的 Angular 指令以声明方式完成.
The meat of your C# code is imperative and could be translated to TypeScript in some fashion. This would not be recommended though. Much of the actual data driven table building can be done in a declarative way using existing Angular directives.
代码的核心是根据类型显示单元格.这可以作为一个简单的包装器指令来实现，它将用适当类型的指令替换自身.
The heart of your code displays the cell based on its type. This could be implemented as a simple wrapper directive that will replace itself with a directive for the appropriate type.
对于每种单元格类型，您可以创建一个自定义指令:整数单元格、十进制单元格、下拉单元格、布尔单元格……每个都将处理单元格的显示方式以及控件的呈现方式.
For each cell type you can create a custom directive: integer-cell, decimal-cell, dropdown-cell, boolean-cell... Each would handle how the cell is displayed and what the control is rendered as.
然后您就可以对每一列和每一行使用 ng-repeat，并让包装器指令用自定义类型指令替换自身.
Then you would be able to use ng-repeat for each column and row, and let the wrapper directive replace itself with a custom type directive.
这种方法的另一个优点是您可以更好地分离关注点，遵循开放/封闭原则，您的组件只会做一件事.
Another advantage to this approach is that you have better separation of concerns, follows the open/closed principle and your components would just do one thing.
如果包装器指令使用约定来显示类型指令，您可以在将来添加新类型而无需打开任何现有组件.
If the wrapper directive used a convention to display the type directives, you could add new types in the future without the need to open any existing components.
对于刚接触 Angular 的人来说，这需要大量的工作.我会同意@Dean Ward 的建议.角度有很多可编辑的网格解决方案.如果 uiGrid 不适合您的需求，请查看其他现有组件.
This is a lot of work for someone new to Angular. I would go with @Dean Ward's suggestion. There are a lot of editable grid solutions for angular. If uiGrid doesn't suit your needs, look at other existing components.
更新几个例子
您最好的选择仍然是使用现有的网格组件，例如 uiGrid.如果你想自己写这个，我不推荐——这将是一种方法.
Your best bet is still to use an existing grid component, like uiGrid. If you want to write this yourself, which I don't recommend -- this would be one way of doing it.
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);
在您看来，您应该有以下内容:
In your view for this you would have something like:
<input
type="number"
class="cell-integer"
ng-model="vm.data.value"
ng-blur="save(vm.data.value)"
</
这篇关于Angular Js+ TypeScript:如何创建动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
