gpt4 book ai didi

kendo-ui - Kendo Grid 带有使用 MultiSelect 的自定义弹出编辑器 - 无法在模型中获取所选项目

转载 作者:行者123 更新时间:2023-12-04 10:25:50 26 4
gpt4 key购买 nike

所以标题几乎说明了一切。我正在尝试将新的 MultiSelect 小部件合并到 Grid 的自定义弹出编辑器模板中。

我正在使用数据属性初始化方法并从远程数据源读取下拉选项。这一切正常,但我无法将所选项目的值放入模型中。

当我保存该行时,一个数据数组被发送到服务器,代表在 MultiSelect 中选择的第一个数据项,而不是一个以逗号分隔的所选值列表。

任何想法如何将 MultiSelect 值(选定值的列表/数组)放入网格模型中?

谢谢

编辑:我现在使用了一种解决方法,但我很想知道是否有一种“正确的方法”可以将 MultiSelect 与网格一起使用。

解决方法是在 Grid 的配置中添加如下内容:

save: function(e) { 
e.model.items = $('#select_items').data("kendoMultiSelect").value();
}

这是弹出编辑器模板的相关部分:
<input name="select_items" id="select_items" data-value-field="id" 
data-text-field="description" data-source="itemsDataSource"
data-role="multiselect" data-auto-bind="false" data-item-template="itemList">

我没有 select_items在模型定义中:我使用上面的解决方法将 MultiSelect 的值复制到 items这是在模型中。这似乎有效,我只是不知道为什么有必要。

最佳答案

用于使用 MultiSelect在网格中有几个问题需要考虑:

  • 网格编辑器仅支持作为列的类型 string , boolean , numberdate .由于您将要保存...的数组,让我们说 string你将不得不解决这个问题。
  • 由于您从服务器接收一组值,因此您必须使用 template用于将其序列化为 string以显示从服务器接收的值。
  • KendoUI 无法猜测您想使用 MultiSelect 作为输入,因此您必须提供和 editor功能。

  • 让我们解决所有这些问题:

    解决 array的问题的 string最简单的解决方案是不对 KendoUI 说任何关于接收的内容。

    对于 template ,我将使用 JavaScript join将所有值拉在一起的方法,以“,”分隔。就像是:
    { field: "Cities", template: "#= Cities.join(', ') #" }

    最后对于编辑器,我使用:
    { field: "Cities", template: "#= Cities.join(', ') #", editor : citiesEditor }

    function citiesEditor(container, options) {
    $("<select multiple='multiple' data-bind='value : Cities'/>").appendTo(container).kendoMultiSelect({
    dataSource: citiesDS
    });
    }

    在我的情况下 citiesDS只是一个 arraystring带有有效城市的名称。
    var citiesDS = [
    "Boston", "Kirkland", "London", "New York", "Philadelphia", "Redmond", "Seattle", "Tacoma"
    ];

    当您更新(保存)时,它会向主机发送一个 arrayCities 中引入城市的字符串 field 。

    示例:这里 http://jsfiddle.net/OnaBai/Q2w7z/

    关于kendo-ui - Kendo Grid 带有使用 MultiSelect 的自定义弹出编辑器 - 无法在模型中获取所选项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17575578/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com