当通过 Ajax 检索项目时,将自定义数据属性添加到 Semantic UI Dropdown

阿尔达维斯

这是我构建下拉列表的方式(以haml):

#my_dropdown.ui.dropdown{ data: { path: objects_path } }
  = f.hidden_field :my_id
  %i.dropdown.icon
  .default.text Text
  .menu
    - @collection.each do |object|
      .item{ data: { value: object.id, text: object.name, color: object.color } }
        = object.name

这工作得很好。我的.item元素有额外的数据,例如.data('color'). 我决定切换到 ajax 方法,而不是一次加载所有元素。

$.fn.api.settings.api =
    'search objects': $('#my_dropdown').data('path') + '?q={query}'

$('#my_dropdown').dropdown
    apiSettings:
      action: 'search objects'

    onChange: (value, text, selectedItem) ->
      console.log selectedItem.data()

这是我返回的 JSON 的样子:

{
  "success":true,
  "results": [
    { "name":"Object #1", "value":1, "color":"blue" },
    { "name":"Object #2", "value":2, "color":"red" },
    { "name":"Object #3", "value":3, "color":"green" }
  ]
}

当我console.log selectedItem.data()在下拉选择更改后执行以下操作时,我只看到:

{ value: 1 }

生成的 HTML 如下所示:

<div class="item" data-value="1">Object #1</div>
<div class="item" data-value="2">Object #2</div>
<div class="item" data-value="3">Object #3</div>

如何让项目包含自定义数据属性,例如data-color在使用 Ajax 时

阿尔达维斯

我能够使用以下代码手动覆盖语义 UI 菜单模板:

$.fn.dropdown.settings.templates =
  menu: (response, fields) ->
    values = response[fields.values] or {}
    html = ''
    $.each values, (index, option) ->
      extraData = ''
      $.each fields.extraAttrs, (_j, attr) ->
        if option[attr]
          extraData += "data-#{attr}='" + option[attr] + "''"

      maybeText = if option[fields.text] then 'data-text="' + option[fields.text] + '"' else ''
      maybeDisabled = if option[fields.disabled] then 'disabled ' else ''
      html += '<div class="' + maybeDisabled + 'item" data-value="' + option[fields.value] + '"' + extraData + maybeText + '>'
      html += option[fields.name]
      html += '</div>'
      return
    html

然后当我初始化我的下拉菜单时,我可以这样做:

$('#my_dropdown').dropdown
    apiSettings:
      action: 'search objects'
    fields:
      extraAttrs: ['color']

这允许我访问每个下拉项上的额外数据元素。如果有人有更好的方法来做到这一点,请告诉我。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Semantic-UI Dropdown 也在“数据值”中搜索

来自分类Dev

通过Ajax使用自定义滚动条将内容添加到元素

来自分类Dev

通过Ajax使用自定义滚动条将内容添加到元素

来自分类Dev

通过Apache POI将自定义(扩展)属性添加到docx和段落

来自分类Dev

通过Admin SDK将自定义属性/值添加到Google Apps Acount

来自分类Dev

如何将Semantic-UI添加到Phoenix

来自分类Dev

将自定义数据添加到Kendo UI日历中作为工具提示

来自分类Dev

如何将自定义ui(使用类似photoshop的程序)添加到android应用项目中?

来自分类Dev

通过(?)用户数据将自定义对象(例如,使用DYRateView进行评级)添加到GMSMarker

来自分类Dev

jQuery UI通过Ajax错误自动完成:

来自分类Dev

ReactJS Semantic ui - 当值属性存在时无法输入表单

来自分类Dev

将多个自定义数据数组添加到WooCommerce自定义Ajax上的购物车项目中添加到购物车

来自分类Dev

如何通过语义ui将参数传递给Dropdown组件?

来自分类Dev

如何通过代码将自定义configSections添加到app.config文件

来自分类Dev

通过API将自定义列名称添加到Sendgrid列表

来自分类Dev

通过UFW将自定义SSH端口添加到Ubuntu 12.04 LTS

来自分类Dev

Angular:通过控制器将自定义脚本/ css添加到局部

来自分类Dev

通过CLI将自定义记录器添加到JBoss EAP 6.2

来自分类Dev

通过API将自定义列名称添加到Sendgrid列表

来自分类Dev

通过短代码 WordPress 将自定义文本添加到联系表 7

来自分类Dev

如何将自定义事件添加到NativeScript UI插件

来自分类Dev

将自定义CSS样式添加到Material UI KeyboardDatePicker

来自分类Dev

将自定义CSS样式添加到Material UI KeyboardDatePicker

来自分类Dev

如何将自定义svg图标添加到Material UI字体图标?

来自分类Dev

通过ajax将数据添加到div

来自分类Dev

通过AJAX将高分添加到数据库

来自分类Dev

将自定义http标头添加到所有jQuery AJAX请求中

来自分类Dev

将自定义ajax按钮添加到WooCommerce管理订单列表

来自分类Dev

检索通过ajax发送的数据

Related 相关文章

  1. 1

    Semantic-UI Dropdown 也在“数据值”中搜索

  2. 2

    通过Ajax使用自定义滚动条将内容添加到元素

  3. 3

    通过Ajax使用自定义滚动条将内容添加到元素

  4. 4

    通过Apache POI将自定义(扩展)属性添加到docx和段落

  5. 5

    通过Admin SDK将自定义属性/值添加到Google Apps Acount

  6. 6

    如何将Semantic-UI添加到Phoenix

  7. 7

    将自定义数据添加到Kendo UI日历中作为工具提示

  8. 8

    如何将自定义ui(使用类似photoshop的程序)添加到android应用项目中?

  9. 9

    通过(?)用户数据将自定义对象(例如,使用DYRateView进行评级)添加到GMSMarker

  10. 10

    jQuery UI通过Ajax错误自动完成:

  11. 11

    ReactJS Semantic ui - 当值属性存在时无法输入表单

  12. 12

    将多个自定义数据数组添加到WooCommerce自定义Ajax上的购物车项目中添加到购物车

  13. 13

    如何通过语义ui将参数传递给Dropdown组件?

  14. 14

    如何通过代码将自定义configSections添加到app.config文件

  15. 15

    通过API将自定义列名称添加到Sendgrid列表

  16. 16

    通过UFW将自定义SSH端口添加到Ubuntu 12.04 LTS

  17. 17

    Angular:通过控制器将自定义脚本/ css添加到局部

  18. 18

    通过CLI将自定义记录器添加到JBoss EAP 6.2

  19. 19

    通过API将自定义列名称添加到Sendgrid列表

  20. 20

    通过短代码 WordPress 将自定义文本添加到联系表 7

  21. 21

    如何将自定义事件添加到NativeScript UI插件

  22. 22

    将自定义CSS样式添加到Material UI KeyboardDatePicker

  23. 23

    将自定义CSS样式添加到Material UI KeyboardDatePicker

  24. 24

    如何将自定义svg图标添加到Material UI字体图标?

  25. 25

    通过ajax将数据添加到div

  26. 26

    通过AJAX将高分添加到数据库

  27. 27

    将自定义http标头添加到所有jQuery AJAX请求中

  28. 28

    将自定义ajax按钮添加到WooCommerce管理订单列表

  29. 29

    检索通过ajax发送的数据

热门标签

归档