Angular Js+ TypeScript:如何创建动态表

2023-12-21

我是打字稿和角度的新手。我已经使用打字稿和角度js实现了一个模块。在其中我需要创建一个动态表,它将获取演示文稿的类型并相应地附加到我的视图,就像我之前在 C# 中所做的那样。我在下面给出了我的 c# 代码:

  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 绑定。


对于 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)"
</
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular Js+ TypeScript:如何创建动态表 的相关文章

随机推荐

  • Google 登录,数据库端

    我读过有关使用 Google 处理登录的信息这个网站 https developers google com accounts docs OAuth2Login 但它并没有很好地解释数据库应该发生什么 通常 对于数据库中的用户帐户 您会有类
  • 为什么我不能将变量传递到 PHP 中的包含文件中?

    我以前也遇到过这个问题before https stackoverflow com questions 1601348 passing php variables to an included file没有真正的解决方案 又出现这种情况了
  • 需要时自动加载函数/类库

    首先 介绍一下背景 我工作的公司使用massive函数 类库 它包含在每个页面上 成千上万行函数 其中 90 甚至可能不会在页面上调用 为了稍微减轻服务器负载 我一直在尝试更智能的库设置 为此 我将整个文件分成分类库文件 即 sql fun
  • rate() 函数如何平均请求持续时间?

    引自 普罗米修斯 观察值的计数和总和 https prometheus io docs practices histograms count and sum of observations doc 要根据名为 http request du
  • 浮动 div css 下的 margin-top

    我在 float right div 下有一个 div 由于某种原因 上边距无法应用于第一个 div 这是CSS over width 80 float right color e68200 under clear both backgro
  • WPF 中的数据模板

    我有一个关于 WPF 中的数据模板的一般性问题 假设我有一个名为 Question 的抽象类 以及各种子类 例如 MathQuestion GeographyQuestion 等 在某些情况下 使用 Question 数据模板将问题呈现为
  • 从作为引擎安装的 gem 重载 lib 文件

    我正在使用作为引擎安装的 gem 并想要自定义一些类 我想要重载的文件位于我的本地 rvm 目录中 rvmdir gem lib modulename containers file to override rb 我将文件复制到我的应用程序
  • 如何保证时间戳始终是唯一的?

    我使用时间戳对程序中的并发更改进行临时排序 并要求更改的每个时间戳都是唯一的 但是 我发现只需调用DateTime Now是不够的 因为如果快速连续调用它通常会返回相同的值 我有一些想法 但我认为没有什么是 最佳 解决方案 我是否可以编写一
  • MSBuild:包含自定义资源文件作为嵌入资源

    我在构建时使用 MSBuild 动态生成资源文件 但为了能够在运行时读取该资源文件 我需要它成为嵌入式资源 我到处都在研究如何在 a 中标记文件 csproj作为嵌入式资源 我什至尝试过这一点 但没有成功
  • json.net 特殊字符转义

    对 JSON 有点陌生 所以请原谅这个简单的问题 但根据找到的特殊字符列表here http www w3schools com js js special characters asp and here https developer m
  • Qt-fy 现有枚举与 Qt 元数据一起使用

    假设我有一个现有的enum X A B 并希望将其与 Qt 元数据一起使用 例如QMetaObject QMetaEnum QMetaObject meta FsxSimConnectQtfier staticMetaObject for
  • 高可靠性/可用性/安全性编码 - 我应该阅读哪些标准?

    我听说汽车行业有一个叫做 MISRA C 的东西 其他高可靠性 可用性 安全行业的相关标准是什么 比如 Space Aircraft 银行 金融 汽车 Medical 国防 军事 Adam 参观戈达德太空飞行中心及其编码标准 http so
  • 使用“mysql_fetch_row”从数据库检索结果并使用 PHP 和 mysqli 插入数组?

    我需要从几行检索数据 然后将结果插入到枚举数组中 这样我就可以使用 for 循环来回显它 我有这个 我已经连接到数据库 genres sql SELECT genreID FROM genres WHERE imdbID if stmt g
  • 如何基于Web服务更改android中的语言

    目前 我正在开发我正在使用的 Android 项目English作为主要语言 我在用着strings xml字符串常量文件 现在 我想根据网络服务动态更改语言 该服务将根据用户选择 在 设置 中 创建 我知道我们必须为每种语言创建单独的 s
  • 如何最好地设计具有多个过滤器的 REST API?

    作为一个个人编程项目 我正在抓取我大学的课程目录并以 REST API 的形式提供数据 我已成功抓取所有数据并将其存储在数据库中 现在正在开发 API 课程可以根据许多标准进行过滤 教师 学院 学分 时间 日期等 在这种情况下提供 API
  • 微风错误:非法构造 - 使用“或”组合检查

    我遇到了这个微风错误 非法构造 使用 或 来组合检查 在 Chrome 上加载实体的编辑页面时 当我刷新页面时 错误消息不再出现 此错误在我的网站上随机 不规则地发生 我无法使用指定的场景重现它 只是随机遇到它 我在 Breeze 代码中看
  • Nuxt中间件无限重定向问题

    您好 我正在尝试在我的 Nuxt 3 应用程序中执行这个中间件 我正在尝试遵循文档 但收到无限重定向错误 export default defineNuxtRouteMiddleware to from gt const user id 1
  • python TypeError:“列表”对象不可调用错误

    我是 python 新手 我试图理解这里的一个基本错误 我在下面的代码中收到 TypeError list object is not callable 错误 有人可以解释一下我的代码有什么问题吗 graph a b c b a c c b
  • 通过 AKS 群集中的负载均衡器访问服务

    我配置了一个集群 其中的服务 及其相关的 Pod 容器 全部部署到私有子网中 其中一个 Pod 代表应用程序的 UI 我定义了一个具有公共 IP 的负载均衡器来提供对 UI 的访问 至少这是我的意图 当我在浏览器中输入包含负载均衡器 IP
  • Angular Js+ TypeScript:如何创建动态表

    我是打字稿和角度的新手 我已经使用打字稿和角度js实现了一个模块 在其中我需要创建一个动态表 它将获取演示文稿的类型并相应地附加到我的视图 就像我之前在 C 中所做的那样 我在下面给出了我的 c 代码 private void ShowCu