大家好，我只想问一下如何使用 Kendo Ui 网格从我的 mysql 表加载数据。 我也在使用 CodeIgniter。但我不知道如何将它与我的代码集成。这是我的示例代码。
在我的 Controller 中，我有这样的东西。为了进行测试，我将我的数据库查询放入了一个不正确的模型中。
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)
我的表没有输出。我不知道我的错误在哪里。请帮帮我。谢谢。
最佳答案
你可以试试这个。
调用 Controller ，使用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对象绑定(bind)数据源
$("#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
}
]
});
希望对你有帮助:)
关于jquery - 如何使用 Kendo UI Grid 加载远程数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18710076/