[英]How populate Kendo grid with Ajax?
I have a grid on a page and I wanna populate the grid with the results of Ajax function, but I don't know do this correctly. 我在页面上有一个网格,我想用Ajax函数的结果填充网格,但是我不知道正确地做到这一点。 I already seen some examples, but I don't know how to use them in my situation.
我已经看过一些示例,但是我不知道如何在我的情况下使用它们。 So, thanks for the help.
因此,感谢您的帮助。
Ajax Function: 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 result returns 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"
},
]
}
My Grid: 我的网格:
$("#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"
});
Try this at the end of the ajax success: 在ajax成功结束时尝试以下操作:
var ds = new kendo.data.DataSource({
data: result["languages"]
});
$("#grid").data("kendoGrid").setDataSource(ds);
Ok. 好。 And I need to set something else?
我需要设置其他内容吗? Cause, the grid is still empty.
原因,网格仍然是空的。
data.d returns: 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]
I just do not understand why the "languages" inside [ ]. 我只是不明白为什么[]中的“语言”。
var ds = new kendo.data.DataSource({
data: result["languages"]
});
But what I tried to do in my Ajax function... 但是我试图在我的Ajax函数中做的...
When I put the result
in data data: { "languages": [result] },
didn't work. 当我将
result
放入数据data: { "languages": [result] },
它不起作用。
But when I copied the result of console.log(result);
但是当我复制
console.log(result);
and put in data 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" }, ] },
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" }, ] },
。
So, I really don't know what is wrong. 所以,我真的不知道出什么问题了。
$.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);
}
});
And thanks for the tips so far. 并感谢到目前为止的提示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.