Question

大家好我想问一下如何使用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)

我的桌子没有输出。我不知道我的错误在哪里。请帮帮我们。感谢。

Answer 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
            }
        ]
    });

我希望这可以帮助你:)。

Answer 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);

我收到了服务器的响应，但行没有显示在网格中。使用：header（'Content-Type：application / json'）;已解决。

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

2 个答案: