1

同じページに3つのdojoDatagridを表示する必要があります。各データグリッドは、独自のデータストアを使用してデータを表示します。

JsonRestStoreを使用して、グリッドに表示するRESTサービスを照会します。ページで1つのDataGridを使用すると、正常に機能します。しかし、2番目のデータグリッドを使用する傾向がある場合は、最初のデータグリッドのみが表示されます。どちらかのグリッドを削除すると、正常に機能しますが、一緒に機能しません。

私は非常に多くの選択肢を試すことでかなりの時間を費やしていますが、この問題を解決することはできません。resize（）メソッドを呼び出そうとしましたが、機能しませんでした。

以下は私のコードのサンプルコードです。1つのストアはjsonRESTストアを使用し、別のストアは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 に答える