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


How to make dojo datagrid to have editable row data, sortable and pagination

我有一个带有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>

json示例.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.defaultPage=this.option.defaultPage>=1?parseInt(this.option.defaultPage,10):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 数据。有关更多示例和详细信息,请参阅本教程。

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