如何使 dojo 数据网格具有可编辑的行数据、可排序和分页

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>=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 的插件。。 p>

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

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/ 发布了演示