从数据模型创建Dojo网格并添加对话框 [英] Create a Dojo grid and Add Dialog from Data Model
问题描述
我正在开发一个应用程序，用户可以在多个数据模型（也称DB表）上执行CRUD操作。我正在使用Dojo，我对$ code> dojox.grid 模块感到非常满意。但用户还需要添加记录，因此每个表必须有一个添加对话框。
I am developing an app where users can perform CRUD operations on multiple data models (aka. DB tables). I am using Dojo and I am quite happy with the dojox.grid module. But users also need to add records, so there has to be an Add Dialog for each table.
有没有一种方式/模块生成一个Dojo网格和只添加模型的数据结构的添加对话框？像结构参数 c> dojox.grid 一样排序，这样网格和添加对话框都有相同的数据类型，默认值，约束等
当然，我可以编写一个自定义的小部件，只是这样做，但我正在寻找这里存在的东西。
Is there a way/module that generates a Dojo grid and an Add Dialog given only the data structure of the model? Sort of like the structure parameter of dojox.grid, so that both the grid and the add Dialog have the same data types, default values, contraints etc.
Of course I could write a custom widget that would just do that but I am looking for something existing here.
推荐答案
答案是，没有没有这样的模块。你需要建立一个派生对话框。
The answer is, no there is no such module. You'd need to build a derived dialog.
让我们看看需要的东西;
Lets see whats needed;
- 当前网格
- 网格布局（celltypes）
- 名称和标签（结构）
假设有一个添加内容按钮定义了pr-grid，并且该按钮'知道'所述网格的ID，其onClick函数应该在对话框中启动一个窗体。
Assuming there is one 'Add contents' button defined pr-grid and that this button 'knows' the ID of the said grid, its onClick function should fire up a form in dialog.
虽然有dijit.form Widgets还有一系列预定义的 cellTypes ，居住在 DojoX中/网格/细胞/ _base.js 。让一个地图的类型和小部件是1to1：
While there are dijit.form Widgets there's also a range of predefined cellTypes, residing under dojox/grid/cells/_base.js. Lets make a map where type and widget is 1to1:
var map = [{
type: 'dojox.grid.cells.Cell',
dijit: 'dijit.form.TextBox'},
{
type: 'dojox.grid.cells.Bool',
dijit: 'dijit.form.CheckBox'},
{
type: 'dojox.grid.cells.Select',
dijit: 'dijit.form.Select'},
{
type: 'dojox.grid.cells.DateTextBox',
dijit: 'dijit.form.DateTextBox'}
];
在我们的addContents函数中，我们将使用dojox.grid.DataGrid中的可编辑功能。当我们知道有一个这样的时候 - 肯定也有一个生成DOM的函数pr-cell。这是在任何cellType中存在的 formatEditing 函数。
In our addContents function we will make use of the 'editable' functionality in the dojox.grid.DataGrid. When we know there's a such - there is certainly also a function pr-cell that generates the DOM. This is the formatEditing function which is present in any cellType.
// for instance
dojox.grid.cells.Select.prototype.formatEditing( /* value */ "", /* row */ -1);
只需要构建在对话框中显示的内容 - 以下使用上述所提供的功能，并提供dijit适当的标记，以在dijit.Dialog中显示。
Only thing thats needed is to construct the contents which should be shown in the dialog - following uses the above mentioned functionality and provides dijit suitable markup for presentation in a dijit.Dialog.
function addContents(gridId) {
var grid = dijit.byId(gridId);
var contents = ['<form action="MySubmitUrl" data-dojo-type="dijit.form.Form"><table>'];
dojo.forEach(grid.layout.cells, function(cell, idx) {
var szHtml = cell.formatEditing("", -1);
var dijitType = map.filter(function(e) {
return e.type == cell.declaredClass;
})[0].dijit;
var name = grid.structure[0][idx].field;
var label = grid.structure[0][idx].name;
var elementMod = ' data-dojo-type="' + dijitType + '" id="' + name + '" name="' + name + '" ';
contents.push('<tr><td>');
contents.push('<label for="' + name + '">' + label + ': </label>');
contents.push('</td><td>');
contents.push(szHtml.replace(/^([^\ ]*)/, "$1" + elementMod));
contents.push('</td></tr>');
});
contents.push('</table></form>');
var dialog = new dijit.Dialog({
content: contents.join("")
});
dialog.show();
}
内容很容易风格，还应提供提交/取消按钮但我确定你得到的想法。 运行示例
The contents is easy style-able and should also supply a submit/cancel button but im certain you get the idea. Running sample
让我知道它是如何运行的未经测试的组合框/日期时间类型）
Let me know how it runs (havent tested combobox / datetime types)
这篇关于从数据模型创建Dojo网格并添加对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
