1

我需要在同一页面中显示三个 dojo Datagrid。每个数据网格都将使用自己的数据存储来显示数据。

我使用 JsonRestStore 来查询我的 REST 服务以显示在网格中。如果我在页面中使用一个 DataGrid，它可以正常工作。但是当我倾向于使用第二个数据网格时，它只显示第一个数据网格。如果我删除任何一个网格，它可以正常工作但不能一起工作。

我花了很多时间尝试了这么多替代方案，但我无法解决这个问题。我什至尝试调用 resize() 方法但没有用。

下面是我的代码示例代码。一个存储使用 json rest 存储，另一个使用带有 itemfile 读取存储的硬编码数据。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My ECM Groups</title>
        <link rel="stylesheet" href="scripts/dojo/../dijit/themes/claro/claro.css">
        <style type="text/css">@import "scripts/dojo/../dojox/grid/resources/claroGrid.css";

            /*Grid needs an explicit height by default*/
            #grid {
                height: 60em;
            }</style>
 <script src='scripts/dojo/dojo.js'></script>
        <script> 

            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.JsonRestStore");
            dojo.require("dojo.data.ItemFileWriteStore");

             dojo.require("dojo._base.lang");
              dojo.require("dojo.dom");
               dojo.require("dojo.domReady!");

            var allGroupsGrid, allGroupsStore;
            dojo.ready(function(){



  var data = {
      identifier: "id",
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 60;
    for(var i = 0, l = data_list.length; i < rows; i++){
        data.items.push(dojo._base.lang.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up layout*/
    var layout = [[
      {'name': 'Column 1', 'field': 'id', 'width': '100px'},
      {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
      {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
      {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
    ]];

    /*create a new grid*/
    var grid = new dojox.grid.DataGrid({
        id: 'grid3',
        store: store,
        structure: layout,
        rowSelector: '20px'});

        /*append the new grid to the div*/
        grid.placeAt("gridDiv");

        /*Call startup() to render the grid*/
        grid.startup();




     allGroupsStore = new dojox.data.JsonRestStore({target:"resources/ecmgroups/allgroups/", idAttribute:"sid"});  
    var allGroupsLayout = [{'name': 'My ECM Groups', 'field': 'displayName', 'width': 'auto'}];

    /*create a new grid*/
    allGroupsGrid = new dojox.grid.DataGrid({
        id: 'grid',
        store: allGroupsStore,     
        structure: allGroupsLayout,
        rowSelector: '20px'});
          allGroupsGrid.placeAt("allGroupsGridDiv");
        allGroupsGrid.startup();



    });

</script>

<script>
    function renderSecondGrid()
    {
        alert(dijit.byId('grid'));


//dojo.query('div[id^="myGroupsGridDiv"]').forEach(function(node, index, arr) { 

    dijit.byId('grid3').resize(); 
    dijit.byId('grid').resize(); 
    }


</script>


    </head>
    <body>
        <input type="button" value="click" onclick="javascript:renderSecondGrid();">

        <div style="display:block ;width: 30%;height: 50%; float: right" id="allGroupsGridDiv">right</div>      
        <div style="display:block ;width: 30%;height: 50%; " id="gridDiv">custom</div>
    </body>
</html>
4

1 回答 1

0

我创建了一个包含多个 DataGrid 的页面。这是我页面中的一些示例代码。这都是javascript。

aHTML += "<div id='techDiv" + _userNumber + "'></div>";

...  aHTML has more <table> type tags too ...

var _optionsTable = dojo.create('table', {
    innerHTML : aHTML,
    id : 'optionsTable' + _userNumber,
    class : "UserTechTable"
});
_div.appendChild(_optionsTable);


_techStore = new dojo.data.ItemFileWriteStore({
    data : {
        identifier : 'uniqueId',
        items : techs
    }
});

...
var layout = [ [ {
    name : 'Delete',
    field : 'uniqueId',
    width : '80px',
    formatter : _makeDeleteButton
}, {
    'name' : 'Device',
    'field' : 'deviceCode',
    'width' : '40px'
}, {
    'name' : 'MAC',
    'field' : 'macCode',
    'width' : '40px'
}, {
    'name' : 'Layer',
    'field' : 'layerCode',
    'width' : '80px'
} ] ];

var _techGrid = new dojox.grid.DataGrid({
    id : 'techGrid' + _userNumber,
    store : _techStore,
    structure : layout
}, 'techDiv' + _userNumber);
_techGrid.startup();

如果您需要更多信息，请告诉我。

PS：您可能需要考虑将代码与标记分开。将 js 移至外部 *.js 文件。

于 2013-01-23T21:03:37.893 回答