在dojo中创建多个网格

时间:2013-01-08 14:12:20

标签: dojo dojox.grid.datagrid dojox.grid

假设我有多个源,我想要一个dojo-grid并按其数据填充。 选择一个源后,我可以创建并填充网格。但是当我选择所有来源时,假设我选择了3.所以,我必须在同一页面中创建3个网格而不是一个。我想我必须使用循环,以便我可以创建与源一样多的网格。

但是我无法编写用于创建多个dojo jata网格的代码。请提供一些建议或建议一些代码示例。

对于单个网格,我有这样的代码:

     require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp',      'dojo/date/locale', 'dojo/domReady!'],
          function(DataGrid, ItemFileReadStore){
            var layout = [
                {name:'srcrecno',field:'srcrecno',width:20},
                {name: 'Score', field: 'Score', width:20},
                {name: 'Members', field: 'Members', width:20},
                {name:'Entities', field:'Entities',width:20}
                ];

            var store = new ItemFileReadStore({
                data: {
                    items:<%=fa.jsonstring()%>
                }
            });
            var grid = DataGrid({
                id: 'grid',
                store: store,
                structure: layout,

            });
            grid.placeAt('gridDiv');
            grid.startup();
        }); 

1 个答案:

答案 0 :(得分:0)

var data1 =  {
        items : <brp:json value="${display1}"/>,
        identifier : "id"
    };
 var store = new dojo.data.ItemFileReadStore({
    data : data1
}); 

        var layout = [ {
            field : 'id',
            name : 'Column1',
            width : '150px'
        },{
            field : 'Column2',
            name : 'Column2',
            width : '200px'
            },{
            field : 'Column3',
            name : 'Column3',
            width : '490px'
        } ];
        var grid = new dojox.grid.EnhancedGrid({
            id : 'grid',
             query : {
                id : '*'
            }, 
            store : store, 
            clientSort : false,
            rowSelector : '20px',
            plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}},
            height : "380px",   
            structure : layout,
        }, document.createElement('div'));

        dojo.byId("div1").appendChild(grid.domNode);



         var data2 =  {
                items : <brp:json value="${display1}"/>,
                identifier : "id"
            };
         var store2 = new dojo.data.ItemFileReadStore({
            data : data2
        });  

        var Structure2 = [ {
            field : 'id',
            name : 'Column1',
            width : '150px'
        },{
            field : 'Column2',
            name : 'Column2',
            width : '200px'
            },{
            field : 'Column3',
            name : 'Column3',
            width : '490px'
        } ];
        var grid2 = new dojox.grid.EnhancedGrid({
             id : 'grid2',
             query : {
             id : '*' 
            }, 
            store : store2,
            clientSort : false,
            rowSelector : '20px',
            plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}},
            height : "380px",   
            structure : Structure2,

        }, document.createElement('div'));

        dojo.byId("div2").appendChild(grid2.domNode); 

        grid.startup();
        grid2.startup();

你还需要做一件事 - 在div里面你想要显示高度为

的div

备注 - grid.startup(); - &gt;表示你的div的开始 grid是您指定的网格

div1和div2 ---&gt;你的div-id

插件:
{indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}}
  - &gt;用于网格数据的复选框

像这样我们可以填充没有。使用dojo的网格。