如何使用 Kendo UI Grid 加载远程数据？答案

【问题标题】：How to load remote data using Kendo UI Grid?如何使用 Kendo UI Grid 加载远程数据？
【发布时间】：2013-09-10 03:01:02
【问题描述】：

大家好，我只是想问一下如何使用 Kendo Ui 网格从我的 mysql 表中加载数据。我也在使用 CodeIgniter。但我不知道如何将它与我的代码集成。这是我的示例代码。

在我的控制器中，我有这样的东西。为了测试，我将我的数据库查询放在一个不正确的模型中。

CONTROLLER

public function displayListItem(){
        $sqlSelectAll = "select * from items";
        $resultSelectAll = $this->db->query($sqlSelectAll);
        echo json_encode($resultSelectAll->row_array());
}

JAVASCRIPT PART

<script type="text/javascript">
$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "<?php echo site_url('item_controller/displayListItem'); ?>"
            },
            schema: {
                model: {
                    fields: {
                        itemid: { type: "number" },
                        itemcode: { type: "string" },
                        itemname: { type: "string" },
                        itemdesc: { type: "string" },
                        itembrand: { type: "string" },
                        itemunit: { type: "number" },
                        salescatname: { type: "string" },
                        entrydate: { type: "date" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        height: 430,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
                field:"itemid",
                filterable: false
            },
            "itemcode",
            {
                field: "itemname",
                title: "Item Name",
                width: 120,
            }, {
                field: "itemdesc",
                title: "Description",
                width: 260
            }, {
                field: "itembrand",
                title: "Brand",
                width: 150
            }, {
                field: "itemunit",
                title: "Unit",
                width: 150
            }, {
                field: "salescatname",
                title: "Category",
                width: 150
            }, {
                field: "entrydate",
                title: "Entry Date",
                width: 150
            }
        ]
    });
});

访问表格

<div id="grid"></div>

这是我的表结构：

mysql> desc items;
+--------------+------------------+------+-----+-------------------+----------------+
| Field        | Type             | Null | Key | Default           | Extra          |
+--------------+------------------+------+-----+-------------------+----------------+
| itemid       | int(10) unsigned | NO   | PRI | NULL              | auto_increment |
| itemcode     | varchar(100)     | YES  | MUL | NULL              |                |
| itemname     | varchar(500)     | YES  | MUL | NULL              |                |
| itemdesc     | varchar(512)     | YES  | MUL | NULL              |                |
| itembrand    | varchar(128)     | YES  | MUL | NULL              |                |
| itemunit     | varchar(45)      | YES  | MUL | NULL              |                |
| salescatid   | int(10) unsigned | YES  | MUL | NULL              |                |
| salescatname | varchar(128)     | YES  | MUL | NULL              |                |
| entrydate    | timestamp        | YES  | MUL | CURRENT_TIMESTAMP |                |
+--------------+------------------+------+-----+-------------------+----------------+
9 rows in set (0.04 sec)

我的表没有输出。我不知道我的错误在哪里。请帮帮我。谢谢。

【问题讨论】：

您是否在浏览器控制台 (firebug) 中遇到任何错误？
不，没有错误。我只有一张空桌子。我无法从我的数据库中获取我的表值。
你能在firebug中看到服务器请求吗？
我正在使用 Chrome。如何检查服务器请求？当我尝试打印 json 格式时。它列出了我所有的产品。我只是不知道如何调用这些值。
按 F12 并转到网络选项卡..

标签： jquery mysql codeigniter kendo-ui kendo-grid

【解决方案1】：

你可以试试这个。

调用控制器，使用var对象存储内容。

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "<?php echo site_url('item_controller/displayListItem'); ?>", false);
xhReq.send(null);
var jsonObject = JSON.parse(xhReq.responseText);

使用var对象绑定数据源

    $("#grid").kendoGrid({
        dataSource: {
            data: jsonObject,
            schema: {
                model: {
                    fields: {
                        itemid: { type: "number" },
                        itemcode: { type: "string" },
                        itemname: { type: "string" },
                        itemdesc: { type: "string" },
                        itembrand: { type: "string" },
                        itemunit: { type: "number" },
                        salescatname: { type: "string" },
                        entrydate: { type: "date" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        height: 430,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
                field:"itemid",
                filterable: false
            },
            "itemcode",
            {
                field: "itemname",
                title: "Item Name",
                width: 120,
            }, {
                field: "itemdesc",
                title: "Description",
                width: 260
            }, {
                field: "itembrand",
                title: "Brand",
                width: 150
            }, {
                field: "itemunit",
                title: "Unit",
                width: 150
            }, {
                field: "salescatname",
                title: "Category",
                width: 150
            }, {
                field: "entrydate",
                title: "Entry Date",
                width: 150
            }
        ]
    });

希望对你有帮助:)

【讨论】：

【解决方案2】：

在你的 php 文件请求中：

$limit = $this->input->get('sizePage');
$page = $this->input->get('page');

$data['total'] = $this->items_model->total_rows;
$data['data'] = $this->items_model->paginate($limit, $offset)->result();

header('Content-Type: application/json');

echo json_encode($data);

我收到了来自服务器的响应，但行没有出现在网格中。 With: header('Content-Type: application/json');, 已解决。

【讨论】：