javascript - 我找不到一种优雅的方法将数据库源添加到 dgrid

Question

现在我已经

require([
            "dojo/on", "dgrid/OnDemandGrid","dgrid/Tree","dgrid/Editor", "dgrid/Keyboard", "dojo/_base/declare",
            "dgrid/data/createHierarchicalStore", "data/projects_data",
            "dojo/domReady!"
        ], function(
            on, Grid, Tree, Editor, Keyboard, declare, createHierarchicalStore, hierarchicalCountryData
        ){
            var count = 0; // for incrementing edits from button under 1st grid

            function nbspFormatter(value){
                // returns " " for blank content, to prevent cell collapsing
                return value === undefined || value === "" ? " " : value;
            }

            var StandardGrid = declare([Grid, Keyboard, Editor, Tree]);

            window.grid = new StandardGrid({
                collection: createHierarchicalStore({ data: hierarchicalCountryData }, true),
                columns: [
                    {renderExpando: true, label: "Name", field:"variant_name", sortable: false, editor: "text", editOn: "dblclick"},
                    {label: "Visited", field: "bool", sortable: false, editor: "checkbox"},
                    {label:"Project", field:"project", sortable: false, editor: "text", editOn: "dblclick"},
                    {label:"locked", field:"locked", editor: "text", editOn: "dblclick"},
                    {label:"modified", field:"modified", editor: "text", editOn: "dblclick"},
                    {label:"summary", field:"summary", editor: "text", editOn: "dblclick"}
                ]
            }, "treeGrid2");

                grid.on("dgrid-datachange", function(evt){
                    console.log("data changed: ", evt.oldValue, " -> ", evt.value);
                    console.log("cell: ", evt.cell.row.id, evt.cell.column.field);
                });
                grid.on("dgrid-editor-show", function(evt){
                    console.log("show editOn editor: ", evt);
                });
                grid.on("dgrid-editor-hide", function(evt){
                    console.log("hide editOn editor: ", evt);
                });
        });

data/projects 是一个包含数据的 js 文件。但是现在如何将这个 dGrid 连接到 MySQL 数据库呢？在文档中找不到任何好的信息。我认为可能是 JSON Rest 的问题，但对此不确定。

补充:我可以在 HTML 表中显示数据库。是否有合适的可能性从 HTML 表填充 dGrid？

我还缺少一些东西。有联系来自数据库-> PHP但无法在正确的 JS 中获得结果以加载到 dStore 中。

Answer 1

最简单的方法是用您选择的服务器端语言(在本例中听起来像 PHP)编写一个服务，该服务根据 MySQL 数据库中的数据生成 JSON 输出。根据数据的潜在大小，您可以将数据设计为与 dstore 中两个开箱即用的存储之一一起使用:Request(和 Rest如果还涉及写操作)，或RequestMemory。

两者中更简单的是RequestMemory，它只是将Memory存储的功能与预先的服务器请求(通过Request >)。该存储将期望服务以一个完整的数据负载进行响应:一组对象，其中每个对象都是数据库中的一条记录。像这样的事情:

[
    {
        "id": 1,
        "foo": "bar"
    },
    {
        "id": 2,
        "foo": "baz"
    }
]

Rest 存储需要相同格式的数据，但也希望服务能够处理过滤、排序和范围。过滤和排序通过查询字符串参数表示(例如，在最简单的过滤器情况下为 foo=bar&baz=bim，以及 sort(+foo) 或 sort(- foo) 用于排序)，而范围通常通过 HTTP Range header 表示(例如，Range: Items 0-9 表示前 10 个项目)。

为 Rest 存储实现服务显然需要更多工作，但如果您希望数据源可能包含数千个项目，则更好，因为 RequestMemory别无选择，只能预先请求所有项目。

使用这些存储中的任何一个，一旦您拥有了适当输出 JSON 的服务，您就可以创建存储的实例，其 target 指向服务端点，然后将其传递到网格通过 collection 属性。

如果您的数据旨在表示层次结构，则仍然可以将 dstore/Tree 混合到 dstore/RequestMemory 或 dstore/Request，前提是您的层次结构是通过父 ID 引用表示的。默认情况下，Tree 通过每个项目的 parent 属性过滤子项，并通过检查 hasChildren 报告 mayHaveChildren 结果每个项目的属性。