0

我一直在尝试让模板内容（ItemTemplate 等）在 MultiSelect 控件中工作。在高层次上，我想在页面加载时加载 MultiSelect 并且我希望能够更新它。

我有一些非常简单的html：

<script type="text/x-kendo-template" id="members-template">

    <select multiple="multiple">
        # for (var j = 0; j < Members.length; j++) { #
                <option selected value=' + Members.length + '>'HI'</option>

        # } #
    </select>
</script>

<div id="TeeOffTimes"></div>

而javascript是：

var memberData =[
{
    "Id": 1,
    "FirstName": "Lorenzo",
    "LastName": "Lamas",
    "Gender": "M",
    "Handicap": 72,
    "Discount": 0,
    "CartId": null,
    "Email": null,
    "Cart": null,
    "Lockers": [],
    "MemberAddresses": [],
    "MemberCarts": [],
    "MemberLockers": [],
    "MemberTeeOffs": []
},
{
    "Id": 2,
    "FirstName": "Harry",
    "LastName": "Burgess",
    "Gender": "M",
    "Handicap": 68,
    "Discount": 0,
    "CartId": null,
    "Email": null,
    "Cart": null,
    "Lockers": [],
    "MemberAddresses": [],
    "MemberCarts": [],
    "MemberLockers": [],
    "MemberTeeOffs": []
},
{
    "Id": 3,
    "FirstName": "Paul",
    "LastName": "Stevens",
    "Gender": "M",
    "Handicap": 78,
    "Discount": 0,
    "CartId": null,
    "Email": null,
    "Cart": null,
    "Lockers": [],
    "MemberAddresses": [],
    "MemberCarts": [],
    "MemberLockers": [],
    "MemberTeeOffs": []
},
{
    "Id": 4,
    "FirstName": "Ben",
    "LastName": "Crossen",
    "Gender": "M",
    "Handicap": 82,
    "Discount": 0,
    "CartId": null,
    "Email": null,
    "Cart": null,
    "Lockers": [],
    "MemberAddresses": [],
    "MemberCarts": [],
    "MemberLockers": [],
    "MemberTeeOffs": []
}
];

$(function () {

$('#TeeOffTimes').kendoMultiSelect({
    placeholder: "Select members...",
    autoBind: false,
    dataSource: {
        type: "json",
        serverFiltering: true,
        transport: {
            read: {
                url: '/echo/json/',
                type: 'GET'
            }
        },
        schema: {

            parse: function (response) {                    
                var dataForTemplate = { Members: JSON.stringify(memberData) };                    
                return { json: dataForTemplate };
            }
        }
    },
    itemTemplate: $("#members-template").html()
}).data("kendoMultiSelect");    

});

这是该代码的 jsFiddle。您可以看到我使用了jsFiddle 的echo功能来模拟一个返回相关数据的 Ajax 调用。

有没有准备挑战的剑道忍者？

4

1 回答 1

2

目前尚不完全清楚您要做什么，但有几个问题。

首先，一个 Kendo DataSource 需要获取一个数据数组，而不是单个项目，所以这段代码是不正确的：

        parse: function (response) {                    
            var dataForTemplate = { Members: JSON.stringify(memberData) };                    
            return { json: dataForTemplate };
        }

这应该返回一个数组，或者还指定schema.data = "json.dataForTemplate"来告诉 DataSource 从json.dataForTemplate返回对象的字段中提取数据数组。虽然这样做会更容易：

        parse: function (response) {   
            return dataForTemplate;
        }

其次，看起来您正在尝试为整个多选小部件制作模板，但该模板应用于多选内的每个可选项目（数据源中的每个项目）。您指定的模板创建了一个新<select>元素，这将导致 MultiSelect 小部件打开到另一系列选择下拉框。

你想做这样的事情吗？http://jsfiddle.net/2GDSv/1/

于 2013-07-21T18:40:18.257 回答