Javascript dojo中带有select的网格

Javascript dojo中带有select的网格,javascript,dojo,grid,Javascript,Dojo,Grid,我试图在dojo中创建一个动态网格。基本上,我有一个选择表单和一个网格,当我选择一个选择选项时,我希望网格加载一个不同的数据集 代码: 但是,此代码不起作用。如果在sel onChange属性之外调用genGrid(dataframe),则会显示该网格,但当我在select中选择选项时,该网格不会更改 我怀疑这里的问题是如何将网格和select附加到contentpane中,但我找不到更好的方法来实现这一点。1)dojo小部件需要一个DOM节点作为小部件的占位符。您的“目标节点id”是具有该id

我试图在dojo中创建一个动态网格。基本上,我有一个选择表单和一个网格,当我选择一个选择选项时,我希望网格加载一个不同的数据集

代码:

但是,此代码不起作用。如果在sel onChange属性之外调用genGrid(dataframe),则会显示该网格,但当我在select中选择选项时,该网格不会更改

我怀疑这里的问题是如何将网格和select附加到contentpane中,但我找不到更好的方法来实现这一点。

1)dojo小部件需要一个DOM节点作为小部件的占位符。您的“目标节点id”是具有该id的实际DOM元素吗?否则,网格将无法很好地渲染 填充网格时不需要任何placeAt调用-dojo将用datagrid替换id为target node id的DOM元素。 如果您是以编程方式完成这一切,我建议您使用一个id目标节点id来执行document.createElement('div'),例如, 将其附加到html中的父节点,然后创建datagrid,指定目标节点id作为要替换的DOM节点

2) 在select onChange事件处理程序中,您不需要创建新的datagrid。 您只需要更新存储—datagrid将自动更新(这是使用dojo之类的工具包的好处) 根据您的用例,您甚至可以重用同一存储,只需更改其中的数据 (如果存储是itemfilereadstore,则在存储上设置clearonclose)
有关如何使用新数据重新填充网格的示例,请参见

谢谢,现在情况更清楚了。是的,我包括了div target-node-id。我现在明白了,我只需要更新存储。对于jsonrest存储,您将如何做到这一点?我找不到关于这个的文件。
contentPane = new ContentPane({ 
        title: "Group 1",
    });

//Create grid   
function genGrid(dataframe){
    alert(dataframe);
    myStore = Cache(JsonRest({target:"/data/"+dataframe}), Memory());
    return grid = new DataGrid({
        store: dataStore = ObjectStore({objectStore: myStore}), 
        structure:[{"field": "division", "name": "division", "width": "200px"}, {"field": "country", "name": "country", "width": "200px"}, {"field": "sales", "name": "sales", "width": "200px"}, {"field": "cost", "name": "cost", "width": "200px"}]}, 
    "target-node-id").placeAt(contentPane.containerNode);};

sel = new Select({
        name: 'select2',
        onChange: function(select){alert(select);
                                                                                                                genGrid(select)},
        options: [
            { label: 'TN', value: 'Tennessee' },
            { label: 'VA', value: 'Virginia', selected: true },
            { label: 'WA', value: 'Washington' },
            { label: 'FL', value: 'Florida' },
            { label: 'CA', value: 'csvtable' }]
                }).placeAt(contentPane.containerNode);


contentTabs.addChild(contentPane);