【问题标题】:Angular UI Grid - style the column menu/ apply a templateAngular UI Grid - 设置列菜单样式/应用模板
【发布时间】:2015-04-01 13:50:43
【问题描述】:

我想使用 angularjs ui-grid 并且有一个条件:必须可以设置列过滤器菜单的样式。

documentation 中仅说明了如何将新项目添加到列菜单中,而没有说明如何更改设计或添加其他控件。如果我们查看the example,例如应该可以打开一个列菜单,该菜单可以显示两个自定义样式的单选按钮(男性、女性),其中两个按钮接受或拒绝更改。如果接受更改,则应应用过滤器。

是否可以将模板用于列菜单,就像columns header 一样?如何创建自定义列菜单?

谢谢。

【问题讨论】:

    标签: angularjs angular-ui-grid


    【解决方案1】:

    请参阅plunker 以获得解决方案。

    在您的 columnDefs 中,您只需要添加 menuItems。我无法从您的问题中理解您究竟想要这些额外的下拉选项做什么,所以我在一个非常简单的示例中为您建模了一般格式,其中第一个自定义选项只显示在您的菜单中,第二个激活警报包含列名。请让我知道这是否(不)足够。

    有关受支持的 menuItems 属性的完整列表,请参阅this tutorial

    columnDefs: [
      {
        field: 'name',
        menuItems: [{
          title: 'Custom Nothing'
        }, {
          title: 'Column Name',
          action: function() {
            alert(this.context.col.displayName);
          }
    
        }]
      }
    
    ]
    

    【讨论】:

    • 认为 OP (@timtos) 正在寻找添加自定义标记(提及显示单选按钮)以呈现 in 下拉菜单,但我'不确定。这实际上是我现在正在尝试做的事情。
    • @thynctank 我专注于(试图!)回答最后一段中的 OPs 问题 是否有可能在列菜单中使用模板,因为它可以用于列标题?如何创建自定义列菜单?。我不明白 OP 在中间段落中究竟想要回答什么,所以我提供了一个通用/简单的工作示例,并希望如果这不足以满足他/她的需求,OP 会澄清他在寻找什么: )
    【解决方案2】:

    通过http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef#properties_headercellfilter 发现了我认为 OP 正在寻找的东西,绝对是我正在寻找的东西

    您似乎无法仅修改下拉模板,这很烦人,您必须覆盖整个标题单元格模板,但至少您可以在每个列的基础上这样做。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-09-16
      • 2019-03-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多