[英]How populate Kendo grid with Ajax?
我在頁面上有一個網格,我想用Ajax函數的結果填充網格,但是我不知道正確地做到這一點。 我已經看過一些示例,但是我不知道如何在我的情況下使用它們。 因此,感謝您的幫助。
Ajax功能:
$.ajax({
type: "POST",
url: "../ContractManagerWS.asmx/LanguagesGet",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
var result = '{ "languages": [ ';
for (var i = 0; i < data.d.length; ++i) {
result += '{ "LANG_ID": "' + data.d[i].LANG_ID + '", "LANG_DT_DEACTIVATED": "' + data.d[i].LANG_DT_DEACTIVATED + '", "LANG_TX_CODE": "' + data.d[i].LANG_TX_CODE + '", "LANG_TX_NAME": "' + data.d[i].LANG_TX_NAME + '" },';
}
console.log(result += ' ] }');
}
});
var結果返回
{
"languages": [
{
"LANG_ID": "0",
"LANG_DT_DEACTIVATED": "",
"LANG_TX_CODE": "pt-BR",
"LANG_TX_NAME": "Português"
},
{
"LANG_ID": "1",
"LANG_DT_DEACTIVATED": "",
"LANG_TX_CODE": "en-US",
"LANG_TX_NAME": "English"
},
]
}
我的網格:
$("#grid").kendoGrid({
reorderable: true,
resizable: true,
columnMenu: {
filterable: false,
sortable: false
},
filterable: {
mode: "row"
},
sortable: {
mode: "multiple",
allowUnsort: true
},
scrollable: {
virtual: true
},
toolbar: ["create"],
height: 300,
columns: [
{ field: "LANG_ID", title: "ID"},
{ field: "LANG_TX_NAME", title: "Nome"},
{ field: "LANG_TX_CODE", title: "Código"},
{ command: ["Editar"], title: "Editar"},
{ command: ["Desativar"], title: "Desativar" },
{ field: "LANG_DT_DEACTIVATED", title: "Desativado em"}
],
editable: "popup"
});
在ajax成功結束時嘗試以下操作:
var ds = new kendo.data.DataSource({
data: result["languages"]
});
$("#grid").data("kendoGrid").setDataSource(ds);
好。 我需要設置其他內容嗎? 原因,網格仍然是空的。
data.d返回:
[Object, Object]
0: Object
LANG_DT_DEACTIVATED: null
LANG_ID: 0
LANG_TX_CODE: "pt-BR"
LANG_TX_NAME: "Português"
__type: "ContractManager.Language"
__proto__: Object
1: Object
LANG_DT_DEACTIVATED: null
LANG_ID: 1
LANG_TX_CODE: "en-US"
LANG_TX_NAME: "English"
__type: "ContractManager.Language"
__proto__: Object
length: 2
__proto__: Array[0]
我只是不明白為什么[]中的“語言”。
var ds = new kendo.data.DataSource({
data: result["languages"]
});
但是我試圖在我的Ajax函數中做的...
當我將result
放入數據data: { "languages": [result] },
它不起作用。
但是當我復制console.log(result);
並放入數據data: { "languages": [{ "LANG_ID": "0", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "pt-BR", "LANG_TX_NAME": "Português" }, { "LANG_ID": "1", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "en-US", "LANG_TX_NAME": "English" }, ] },
。
所以,我真的不知道出什么問題了。
$.ajax({
type: "POST",
url: "../ContractManagerWS.asmx/LanguagesGet",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var result;
for (var i = 0; i < data.d.length; ++i) {
result +=' { "LANG_ID": "' + data.d[i].LANG_ID + '", "LANG_DT_DEACTIVATED": "' + data.d[i].LANG_DT_DEACTIVATED + '", "LANG_TX_CODE": "' + data.d[i].LANG_TX_CODE + '", "LANG_TX_NAME": "' + data.d[i].LANG_TX_NAME + '" },';
}
var dataSource = new kendo.data.DataSource({
//didn't work
data: { "languages": [result] },
//worked
data: { "languages": [{ "LANG_ID": "0", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "pt-BR", "LANG_TX_NAME": "Português" }, { "LANG_ID": "1", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "en-US", "LANG_TX_NAME": "English" }, ] },
schema: { data: "languages" }
});
$("#grid").data("kendoGrid").setDataSource(dataSource);
}
});
並感謝到目前為止的提示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.