dojo에서 다중 격자 만들기

Question

dojo-grid가 있고 데이터로 채우기를 원하는 여러 소스가 있다고 가정합니다. 하나의 소스를 선택하면 그리드를 생성하고 채울 수 있습니다. 그러나 한 번에 모든 소스를 선택하는 경우 3을 선택했다고 가정합니다. 따라서 하나의 페이지 대신 3 개의 그리드를 만들어야합니다. 내가 소스로 그리드를 만들 수 있도록 루프를 사용해야 할 것 같아요.

그러나 다중 dojo jata grid를 작성하기위한 코드를 작성할 수 없습니다. 몇 가지 제안 사항을 제시하거나 몇 가지 코드 예제를 제안하십시오. 단일 그리드

는이 같은 코드를 가지고 :

 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(); 
     }); 

Answer 1

당신은 한 가지 더해야 할

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 내부 를 참고 - grid.startup(); -> 그리드가 지정한 그리드 당신의 사업부 의 시작 표시

div1과 DIV2 ---> 당신의 사업부-ID

플러그인 :
{indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}}
-> 우리는 더 채울 수 있습니다 이와 같이 그리드 데이터의

에 대한 확인란입니다. 도장을 사용하여 그리드의. 당신이 사업부를 표시 할 DIV 내부