我找不到将数据库源添加到 dgrid 的优雅方法
I can't find an elegant way to add a Database Source to a dgrid
现在我有
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 休息但不确定。
补充:
我可以在 HTML Table 中显示数据库。是否有合适的可能性从 HTML Table 填充 dGrid?
我仍然缺少一些东西。有联系来自
数据库 -> PHP
但无法在正确的 JS 中获得结果以加载到 dStore。
最简单的方法是用您选择的 server-side 语言(在本例中听起来像 PHP)编写服务,根据您的数据生成 JSON 输出MySQL 数据库。根据数据的潜在大小,您可以将数据设计为与 dstore 中的两个 out-of-the-box 存储之一一起使用:Request
(如果还涉及写入操作,则 Rest
),或 RequestMemory
.
两者中较简单的是 RequestMemory
,它简单地将 Memory
商店的功能与 up-front 服务器请求(通过 Request
)相结合。该商店将期望该服务以一个完整的数据负载进行响应:一个 object 数组,其中每个 object 都是您数据库中的一条记录。像这样:
[
{
"id": 1,
"foo": "bar"
},
{
"id": 2,
"foo": "baz"
}
]
Rest
存储需要相同格式的数据,但是 还需要该服务处理过滤、排序和范围。过滤和排序通过查询字符串参数表示(例如,foo=bar&baz=bim
在最简单的情况下用于过滤,sort(+foo)
或 sort(-foo)
用于排序),而范围通常通过 HTTP Range header(例如前 10 项为 Range: Items 0-9
)。
为 Rest
商店实施服务显然需要更多工作,但如果您希望您的数据源可能有数千个项目,那将是更好的选择,因为 RequestMemory
别无选择但要请求所有项目 up-front.
对于这些商店中的任何一个,一旦你有一个输出 JSON 的服务,你就可以创建一个商店的实例,它的 target
指向服务端点,然后传递它通过 collection
属性.
到网格
如果您的数据旨在表示层次结构,那么仍然可以将 dstore/Tree
混合到 dstore/RequestMemory
或 dstore/Request
中,前提是您的层次结构是通过 parent ID 引用。默认情况下,Tree
通过每个项目的 parent
属性 过滤 children,并通过检查 hasChildren
属性 报告 mayHaveChildren
结果] 在每个项目上。
现在我有
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 休息但不确定。
补充: 我可以在 HTML Table 中显示数据库。是否有合适的可能性从 HTML Table 填充 dGrid?
我仍然缺少一些东西。有联系来自 数据库 -> PHP 但无法在正确的 JS 中获得结果以加载到 dStore。
最简单的方法是用您选择的 server-side 语言(在本例中听起来像 PHP)编写服务,根据您的数据生成 JSON 输出MySQL 数据库。根据数据的潜在大小,您可以将数据设计为与 dstore 中的两个 out-of-the-box 存储之一一起使用:Request
(如果还涉及写入操作,则 Rest
),或 RequestMemory
.
两者中较简单的是 RequestMemory
,它简单地将 Memory
商店的功能与 up-front 服务器请求(通过 Request
)相结合。该商店将期望该服务以一个完整的数据负载进行响应:一个 object 数组,其中每个 object 都是您数据库中的一条记录。像这样:
[
{
"id": 1,
"foo": "bar"
},
{
"id": 2,
"foo": "baz"
}
]
Rest
存储需要相同格式的数据,但是 还需要该服务处理过滤、排序和范围。过滤和排序通过查询字符串参数表示(例如,foo=bar&baz=bim
在最简单的情况下用于过滤,sort(+foo)
或 sort(-foo)
用于排序),而范围通常通过 HTTP Range header(例如前 10 项为 Range: Items 0-9
)。
为 Rest
商店实施服务显然需要更多工作,但如果您希望您的数据源可能有数千个项目,那将是更好的选择,因为 RequestMemory
别无选择但要请求所有项目 up-front.
对于这些商店中的任何一个,一旦你有一个输出 JSON 的服务,你就可以创建一个商店的实例,它的 target
指向服务端点,然后传递它通过 collection
属性.
如果您的数据旨在表示层次结构,那么仍然可以将 dstore/Tree
混合到 dstore/RequestMemory
或 dstore/Request
中,前提是您的层次结构是通过 parent ID 引用。默认情况下,Tree
通过每个项目的 parent
属性 过滤 children,并通过检查 hasChildren
属性 报告 mayHaveChildren
结果] 在每个项目上。