3

オートコンプリートで使用するカスタム エディターがあります。Web サービスが呼び出され、データが返されます。ただし、エディターでは何も表示されません。schema.parse() にブレークポイントを設定しましたが、ヒットすることはありません。私は何が欠けていますか？

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            autoBind: false,
            suggest: true,
            delay: 500,
            dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
                    read: function (opt) {
                        $.getJSON("/myWebService/GetData");
                    },
                },
                schema: {
                    errors: function (e) {
                        return e;
                    },
                    parse: function (data) {
                        return data.Name;
                    }
                }
            })
        });
}

アップデート：

JSON.stringfy(data) を介して表示されるデータは次のようになります。

[{"住所":"123 1st St.","ID":"1","名前":"David"},{"住所":"234 2nd St.","ID":"2", "名前":"スミス"}]

更新 2:

コードは次のようになります。

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            dataValueField: "Name",
            autoBind: false,
            suggest: true,
            delay: 500,
            dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
                    read: {
                        url: function (opt) {
                            return "/myWebServices/GetData/" + opt.filter.filters[0].value;
                        },
                        dataType: "json"
                    }                        
                },
                schema: {
                    errors: function (e) {
                        return e;
                    }
                },
                data: function (response) {
                    return $.parseJSON(response);
                }
            })
        });
}

更新 3:

最後に、スキーマとデータセクションを削除して機能させました。彼は間違いなく正しい方向に私を指していたので、OnaBai の答えを受け入れます。最終的なコードは次のようになります。

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            dataValueField: "Name",
            autoBind: false,
            suggest: true,
            delay: 500,
            dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
                    read: {
                        url: function (opt) {
                            return "/myWebServices/GetData/" + opt.filter.filters[0].value;
                        },
                        dataType: "json"
                    }                        
                }
            })
        });
}
4

1 に答える 1

6

問題はread関数の実装です。opt.successこの関数は、返したいデータで呼び出す必要があります。URL からデータを取得していますが、そのようなデータは返されていません。

しかし、あなたの場合、特別なことは何もしていないようです (関数を定義する必要はありません)。したがって、それを として定義しObject、単に定義することができますtransport.read.url

以下を使用できます。

dataSource: new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url : "/myWebService/GetData"
        }
    },
    schema: {
        parse: function (data) {
            return data.Name;
        }
    }
})

EDIT : サーバーがデータを返すときにデータを使用し、解析する必要がない場合は、次を使用できます。

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoAutoComplete({
        autoBind      : false,
        suggest       : true,
        delay         : 500,
        dataValueField: "Name",
        dataSource    : new kendo.data.DataSource({
            transport: {
                read: {
                    url : "/myWebService/GetData"
                }
            }
        })
    });
}

トリックはdataValueField、返された配列のどの値が の値であるかを定義する定義autocompleteです。

于 2013-05-11T21:25:47.700 に答える