Question

我有一个带有json类型数据存储区的dojo数据网格。我已经完成了显示从mysql数据库获取的数据。我想做的是允许分页，使行数据可编辑，并将编辑后的数据更新到数据库。这是我到目前为止所得到的：

<style type="text/css">
    @import "dojoroot/dijit/themes/claro/claro.css";
    @import "dojoroot/dojo/resources/dojo.css";
    @import "dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
    @import "dojoroot/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js" data-dojo-config="async: true, isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">

require(["dojo/store/JsonRest"], function(JsonRest){
    myStore = new JsonRest({target:"jsonExample.php"});
});
require([
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/data/ObjectStore",
"dojo/domReady!",
"dijit/form/Form"
], function(DataGrid, ObjectStore){
grid = new DataGrid({
store: dataStore = ObjectStore({objectStore: myStore}),
editable:true,
structure: [
    {name:"ID", field:"writer_id", width: "50px"},
    {name:"Writer's Name", field:"writer_name", width: "200px", editable: true},
    {name:"Writer's Email", field:"writer_email", width: "200px", editable: true}
],
//declare usage of plugins
plugins: {
    pagination: {
        sizeSwitch: false,
        defaultPageSize: 10
    }
},
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
});
</script>

jsonExample.php从mysql获取数据并将数据转换为json格式

<?php
$db=mysql_connect("localhost","root","") or die("could not connect to mysql server");
mysql_select_db("demo",$db) or die("could not connect to database");
$query="SELECT * FROM writers";
$resultSet=mysql_query($query,$db);
$arr = array();
while($row = mysql_fetch_object($resultSet)){               
    $arr[] = $row;
}
$jsonStr = json_encode($arr);
mysql_close($db);
echo "{$jsonStr}";
?>

我的javascript控制台出现以下错误 this.option未定义 this.defaultPage = this.option.defaultPage＆GT; = 1 parseInt函数（this.option.defaultPage，10）：1;

Answer 1

要使网格可编辑，您应该将网格布局（结构）列设置为可编辑，如下所示：

structure: [
    {name:"ID", field:"writer_id", width: "50px"},
    {name:"Writer's Name", field:"writer_name", width: "200px", editable: true, type: dijit.form.TextBox}, //make editable and use input
    {name:"Writer's Email", field:"writer_email", width: "200px", editable: true, type: dijit.form.Textarea} //make editable and use textarea
]

要启用分页，您必须使用 dojox / grid / EnhancedGrid 而不是DataGrid，并加载名为 dojox / grid / enhanced / plugins / Pagination 的插件。

然后声明像这样使用分页插件：

grid = new dojox.grid.EnhancedGrid({
    store: dataStore = ObjectStore({objectStore: myStore}),
    editable:true,
    structure: [
        {name:"ID", field:"writer_id", width: "50px"},
        {name:"Writer's Name", field:"writer_name", width: "200px", editable: true},
        {name:"Writer's Email", field:"writer_email", width: "200px", editable: true}
    ],
    //declare usage of plugins
    plugins: {
        pagination: {
            sizeSwitch: false,
            defaultPageSize: 10
        }
    }
}, "target-node-id")

之后，由于您使用的是JsonRestStore，因此必须使用php代码在后端实现排序和分页逻辑。

排序和页面信息通过网格的ajax请求中的请求标头传递到后端。因此，您只需解析排序和页眉并响应模型的正确json数据。有关更多示例和详细信息，请参阅this tutorial。

Answer 2

我已在http://pradipchitrakar.com.np/programming/dojo-grid-php-mysql-with-pagination/发布了解决方案，并在http://pradipchitrakar.com.np/demos/dojogrid/

进行了演示

如何使dojo datagrid具有可编辑的行数据，可排序和分页

2 个答案: