如何使用Ajax填充Kendo网格?

时间:2014-12-11 19:10:39

标签: jquery ajax kendo-ui grid kendo-grid

我在页面上有一个网格,我想用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 result returns

 {
    "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"
});

3 个答案:

答案 0 :(得分:1)

在ajax成功结束时试试这个:

var ds = new kendo.data.DataSource({
    data: result["languages"]
});

$("#grid").data("kendoGrid").setDataSource(ds);

答案 1 :(得分:0)

确定。我需要设置其他东西吗?因为,网格仍然是空的。

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]

答案 2 :(得分: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);
    }
});

感谢到目前为止的提示。