0

エディターとして AutoComplete を 1 つの列に入力する Kendoui グリッドがあります。

{ title: "Desription", 
    field: 'description',
    editor: function(container, options) {
        var input = $("<input id='selecteditem' />");
        input.attr("name", options.field);
        input.appendTo(container);
        input.kendoAutoComplete({ 
            dataSource: dataSource, 
            dataTextField: "name"
        }); 
    },
    template: "#=name in description#",
    width: "300px"
}

ここで、autocomplete データは、php を介してデータベースから取得されます。

var dataSource = new kendo.data.DataSource({
    transport: { read: 
       { 
         url: "/cabinet/test/autocomplete/data.php", 
         dataType: "json" 
       }
});

phpは次のとおりです。

$query = ('SELECT shipitem_id AS id, name, description, cat_id, lang_string FROM jml_mss_shipment_items');              

$link = mysql_pconnect($dbOptions['host'], $dbOptions['user'], $dbOptions['password']) or die ("Unable To Connect To Database Server");
mysql_select_db($dbOptions['database']) or die ("Unable To Connect To Database");

$arr = array();
$rs = mysql_query($query);
while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; }

header("Content-type: application/json; charset=utf-8");
echo json_encode($arr);
exit();

これは、アイテムを選択すると正常に機能しますが、次の行に移動するとそのままになります

[object Object]

セルで。

上記のテンプレート（説明が未定義であるというエラーが発生する）を含め、元の値を表示するためにあらゆることを試みましたが、成功しませんでした。

これを克服するにはどうすればよいですか？シンプルなものに違いない！

4

2 に答える 2

0

問題は、新しい行を作成すると、DataSource のモデル定義に従って行が作成されることです。ネストされたオブジェクトを使用しているため (フィールドdescriptionは実際にはobject含まnameれています)、これは作成されません。

そのため、実際の値があることをテンプレートで確認する必要があります。何かのようなもの：

template: "#= (data.description ? data.description.name : '') #",

closeCellEnter キーを押すとすぐにオートコンプリートを閉じるという問題については、オートコンプリートchangeイベントから呼び出す必要があります。何かのようなもの：

{
    title   : "Description",
    field   : 'description',
    editor  : function (container, options) {
        var input = $("<input id='selecteditem' />");
        input.attr("name", options.field);
        input.appendTo(container);
        input.kendoAutoComplete({
            dataSource   : dataSource,
            dataTextField: "name",
            change       : function (e) {
                grid.closeCell();
            }
        });
    },
    template: "#= (data.description ? data.description.name : '') #",
    width   : "300px"
}

ここで完全な実行例を確認してくださいhttp://jsfiddle.net/OnaBai/mpNuA/3/

于 2013-05-22T11:42:02.307 に答える