2011-07-28 3 views
0

나는 Json으로 DoJo Enhanced Grid를 구현하려고 시도했지만 지금까지 성공하지 못했습니다.Json으로 DoJo Enhanced Grid 구현하기

이것은 내가 지금까지 해 온 것입니다.

당신이 볼 수 있듯이

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<div xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" xmlns:spring="http://www.springframework.org/tags" version="2.0"> 
<jsp:output omit-xml-declaration="yes"/> 
<spring:url value="/students/listdata" var="mydatasource"/> 

<script type="text/javascript"> 
    dojo.require("dojo.parser"); 
    dojo.require("dojox.grid.EnhancedGrid"); 
    dojo.require("dojox.grid.enhanced.plugins.IndirectSelection"); 
    dojo.require("dijit.form.Button"); 
    dojo.require("dojo.data.ItemFileReadStore"); 
    dojo.addOnLoad(function() { 
     dojo.parser.parse(); 
     loadGrid(dataGrid); 
    }); 

    function loadGrid(dataGrid) { 
     dojo.xhrGet({ 
      url: "${mydatasource}", 
      load: function(data, ioArgs) { 
       dataGrid.setStore(
         new dojo.data.ItemFileReadStore(
          {data: {items : data}}) 
       ); 
      }, 
      error: function(error) { 
       console.log("loading of grid data failed. Exception...", error); 
      } 
     }); 
    } 
</script> 
<util:panel id="titlePane" title="Course List"> 
    <div id="addButton" dojoType="dijit.form.Button"> 
     Add 
    </div> 
    <div id="deleteButton" dojoType="dijit.form.Button"> 
     Delete 
    </div> 

    <div id="grid" jsId="dataGrid" dojoType="dojox.grid.EnhancedGrid" 
     structure ="[ 
         { field: 'id', name: 'ID', width: '55px' }, 
         { field: 'firstName', name: 'First Name', width: '230px' }, 
         { field: 'lastName', name: 'Last Name', width: '50px' }, 
         { field: 'gender', name: 'Gender', width: '145px'} 
        ]" 
     autoWidth="true" 
     autoHeight="true" 
     plugins="{indirectSelection: true}" 
     selectionMode="single"> 
    </div> 
</util:panel> 

, 나는 DOJO하여 AJAX 호출을 통해 JSON 문자열을 얻고있다. 그리드가 생성되지만 데이터로 채워지지 않습니다. 그리드에 두 개의 체크 박스 만 나오면 ...

내가 잘못하고있는 것이 있습니까?

+2

는 데이터 그리드에 필요한 CSS를 포함한 : 작동 코드의 사본은 아래

입니까? 나는 CSS를 한 번 잊었을 때 비슷한 문제가 있다는 것을 기억하는 것 같습니다. –

+0

CSS가 하나의 문제였습니다 ... 그리드가 지금 나타나지만 ... 데이터가 그리드에 채워지지 않고 있습니다. 표가 채워지지 않았습니까? – pundit

답변

1

데이터를로드하지 않는 그리드에 문제가 있음을 알게 된 새로운 상점 정보로 그리드를 새로 고침하십시오.

사실 나는 데이터를 Json String으로 처리해야했습니다.

<script type="text/javascript"> 
    dojo.require("dojo.parser"); 
    dojo.require("dojox.grid.EnhancedGrid"); 
    dojo.require("dojox.grid.enhanced.plugins.IndirectSelection"); 
    dojo.require("dijit.form.Button"); 
    dojo.require("dojo.data.ItemFileReadStore"); 
    dojo.addOnLoad(function() { 
     dojo.parser.parse(); 
     loadGrid(dataGrid); 
    }); 

    function loadGrid(dataGrid) { 
     dojo.xhrGet({ 
      url: "${mydatasource}", 
      handleAs: "json", 
      load: function(data, ioArgs) { 
       dataGrid.setStore(
         new dojo.data.ItemFileReadStore(
          {data: {items : data}}) 
       ); 
      }, 
      error: function(error) { 
       console.log("loading of grid data failed. Exception...", error); 
      } 
     }); 
    }   
</script> 
1

나는 EnhancedGrid를 한번도 사용하지 않았지만 일반 격자의 경우 저장소를 선언적으로 만들고 그 ID를 격자의 (HTML의 store = ... 속성을 통해) 첨부 한 다음 원하는 경우

grid.setStore(...,null,null); 
관련 문제