Dojo-DataGrid ::如何在Dojo DataGrid中动态获取值作为选择框的选项 [英] Dojo-DataGrid :: How to dynamically fetch values as options for a select box in Dojo DataGrid
问题描述
我有一个Dojo-DataGrid，它编程如下：
var jsonStore = new dojo.data.ItemFileWriteStore {url：json / gaskets.json}）;
var layout = [
{field：description，width：auto，name：Tier / Description，可编辑：true}，
{field：billingMethod，width ：auto，name：Billing Method，可编辑：true，
type：dojox.grid.cells.Select，options：['0'，'1']}，
{field： offerComponents，width：auto，name：提供组件，可编辑：true，
类型：dojox.grid.cells.Select，options：['0'，'1']}，
{field：serviceActivity，width：auto，name：Service Activity，editable：true，
type：dojox.grid.cells.Select，options：['0'，'1' ]}，
{field：hours，width：auto，name：Hours}，
{field：rate，width：auto，name：Rate< br />（EUR）}，
{field：cost，width：auto，name：Cost< br />（EUR）}，
{ 价格，宽度： auto，name：Price< br /> （EUR）}，
{field：gvn，width：auto，name：Gvn}
];
grid = new dojox.grid。 DataGrid（{
query：{description：'*'}，
store：jsonStore，
structure：layout，
rowsPerPage：20
}，'gridNode'） ;
字段billingMethod（当前定义为dojox.grid.cells.Select）的选项很难但是我想从后端动态地获取这些值为JSON，但是目前（dojoox.grid.cells.Select）当前使用的是Dojo 1.5（没有选择定义store）。 >
我正在尝试使用dijit.form.FilteringSelect，但是这需要一个id（一个Div）作为其构造函数，我不能指定一个，因为这个选择框必须与网格，而不是单独的DIV。
感谢
Sandeep
你的答案工作正常，问题是在组合中，用户可以选择A，但一旦组合失去焦点，将显示值1。几个月前我遇到了同样的问题，而且我从#dojo得到了KGF的解决方案。这个想法是在单元格上创建一个格式化程序，只需创建一个SPAN元素，然后在该存储上调用查询来获取所选元素的标签并将其放在SPAN上。我修改了你的例子，让它工作。
dojo.require（dojo.data.ItemFileWriteStore）;
dojo.require（dojo.data.ItemFileReadStore）;
dojo.require（dojox.grid.cells.dijit）;
dojo.require（dojox.grid.DataGrid）;
dojo.require（dijit.form.Select）;
dojo.require（'dojox.grid.cells.dijit'）;
dojo.require（'dijit.form.FilteringSelect'）;
var grid;
var jsonStore;
dojo.addOnLoad（function（）{
jsonStore = new dojo.data.ItemFileWriteStore（{
data：{
identifier：识别，
label：description，
items：[
{
识别：123，
描述：项目经理}，
{
识别：234，
描述：开发人员}，
{
识别：536，
description：Developer，
billingMethod：2}
]
}
}）;
var myStore = new dojo.data .ItemFileReadStore（{
data：{
identifier：'value'，
label：'name'，
items：[{
value：1，
名称：'A'，
标签：'A'}，
{
值：2，
名称：'B'，
标签：'B'}，
{
值：3，
名称：'C'，
标签：'C' ]
}
}）;
// [kgf]通过格式化引用FilteringSelect单元格的回调
函数displayValue（nodeId，store，attr，item）{
if（item！= null）{//如果它为空，则没有找到！
dojo.byId（nodeId）.innerHTML = store.getValue（item，attr）;
}
}
var layout = [
{
field：识别，
width：auto，
name：Id 2 Hide，
hidden：true}，
{
field：description，
width：auto，
name：层次/描述，
可编辑：true}，
{
字段：'billingMethod'，
名称：'Billing Method'，
editable：true，
required：true，
width：'150px'，
type：dojox.grid.cells._Widget，
widgetClass：dijit.form.FilteringSelect，
widgetProps：{
存储：myStore
}，
formatter：function（data，rowIndex）{// [kgf]
// alert（data+ data）
var genId ='title'+ rowIndex;
var store = this.widgetProps.store;
var attr =label;
setTimeout（function（）{
store.fetchItemByIdentity（{
identity：data，
onItem：dojo.partial（displayValue，genId，store，attr）
}）;
}，50）;
//现在返回一个具有预定ID的跨度以供我们填充。
return'< span id ='+ genId +'>< / span>';
}
}
];
grid = new dojox.grid.DataGrid（{
query：{
description：'*'
}，
store：jsonStore，
singleClickEdit：true，
结构：layout，
rowsPerPage：20
}，'gridNode'）;
grid.startup（）;
}）;
I have a Dojo-DataGrid which is programatically populated as below :
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });
var layout= [
{ field: "description", width: "auto", name: "Tier/Description", editable:true },
{ field: "billingMethod", width: "auto", name: "Billing Method", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "offeringComponents", width: "auto", name: "Offering Component", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "serviceActivity", width: "auto", name: "Service Activity", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "hours", width: "auto", name: "Hours" },
{ field: "rate", width: "auto", name: "Rate <br/> (EUR)" },
{ field: "cost", width: "auto", name: "Cost <br/> (EUR)" },
{ field: "price", width: "auto", name: "Price <br/> (EUR)" },
{ field: "gvn", width: "auto", name: "Gvn" }
];
grid = new dojox.grid.DataGrid({
query: { description: '*' },
store: jsonStore,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
The options for the field billingMethod (Currently defined as dojox.grid.cells.Select) are hard coded right now, but I would like to get those values dynamically from the backend as JSON. But dojox.grid.cells.Select currently(I am using Dojo 1.5) does not have a option to define a "store".
I am trying to use dijit.form.FilteringSelect, but this needs a id(of a Div) for its constructor and I cannot specify one as this select box has to go with in the grid, rather than a separate DIV.
Thanks Sandeep
Your answer works fine, the issue is that in the combo the user can select A, but once the combo lose the focus, the value 1 will be shown. Some months ago I had the same problem, and I got a solution from KGF on #dojo. The idea is to have a formatter on the cell that just creates a SPAN element, and then it invokes a query over the store to get the label of the selected element and put it on the SPAN. I modified your example to get that working.
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");
dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');
var grid;
var jsonStore;
dojo.addOnLoad(function() {
jsonStore = new dojo.data.ItemFileWriteStore({
data: {
"identifier": "identify",
"label": "description",
"items": [
{
"identify": 123,
"description": "Project Manager"},
{
"identify": 234,
"description": "Developer"},
{
"identify": 536,
"description": "Developer",
"billingMethod":2}
]
}
});
var myStore = new dojo.data.ItemFileReadStore({
data: {
identifier: 'value',
label: 'name',
items: [{
value: 1,
name: 'A',
label: 'A'},
{
value: 2,
name: 'B',
label: 'B'},
{
value: 3,
name: 'C',
label: 'C'}]
}
});
//[kgf] callback referenced by formatter for FilteringSelect cell
function displayValue(nodeId, store, attr, item) {
if (item != null) { //if it's null, it wasn't found!
dojo.byId(nodeId).innerHTML = store.getValue(item, attr);
}
}
var layout = [
{
field: "identify",
width: "auto",
name: "Id 2 Hide",
hidden: true},
{
field: "description",
width: "auto",
name: "Tier/Description",
editable: true},
{
field: 'billingMethod',
name: 'Billing Method',
editable: true,
required: true,
width: '150px',
type: dojox.grid.cells._Widget,
widgetClass: dijit.form.FilteringSelect,
widgetProps: {
store: myStore
},
formatter: function(data, rowIndex) { //[kgf]
//alert("data "+data)
var genId = 'title' + rowIndex;
var store = this.widgetProps.store;
var attr = "label";
setTimeout(function() {
store.fetchItemByIdentity({
identity: data,
onItem: dojo.partial(displayValue, genId, store, attr)
});
}, 50);
//for now return a span with a predetermined id for us to populate.
return '<span id="' + genId + '"></span>';
}
}
];
grid = new dojox.grid.DataGrid({
query: {
description: '*'
},
store: jsonStore,
singleClickEdit: true,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
grid.startup();
});
这篇关于Dojo-DataGrid ::如何在Dojo DataGrid中动态获取值作为选择框的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
