2010-12-14 17 views
1

私のデータグリッド(zero.grid.DataGrid)をデータでいっぱいにして、スプレッドシートアプリケーションで開くことができるcsvファイルなどにエクスポートするjavascript関数を入手したいと考えています。dojoデータグリッドをcsvファイルにエクスポート

がこれを行うための任意の標準的な方法は、私は同じのために検索し、あなたの質問を取得し、しかし、私は答えを見つけるよ... ..

おかげ

アンディ

答えて

3

私は、バックエンドとしてサーブレットを使用してEnhancedGridと輸出業者プラグインを使用してタフな時間を過ごしました。最後に、iFrameを使用して動作させました。

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>CISROMM - Master Milestone List Editor</title> 
    <!-- Include dojo dependencies --> 
    <link rel="stylesheet" href="js/dojoroot/dojo/resources/dojo.css"> 
    <link rel="stylesheet" href="js/dojoroot/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="js/dojoroot/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"> 
    <link rel="stylesheet" href="js/dojoroot/dojox/grid/enhanced/resources/EnhancedGrid.css"> 
    <link rel="stylesheet" href="js/dojoroot/dojox/grid/resources/claroGrid.css"> 
    <script src="js/dojoroot/dojo/dojo.js" 
     data-dojo-config="isDebug: true,parseOnLoad: true"> 
    </script> 
    <!-- Include dojo dependencies --> 

    <!-- Require the widgets --> 
    <script> 
     dojo.require("dojox.grid.EnhancedGrid"); 
     dojo.require("dojo.data.ItemFileWriteStore"); 
     dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter"); 
       dojo.require("dojo.io.iframe"); 
    <!-- Require the widgets -->     

    <!-- Data Export Handler --> 
     function exportAll(){ 
      dijit.byId("grid").exportGrid("csv", function(str){ 
        dojo.io.iframe.create('exportFrame', 'exportFrameLoaded()', ''); 
        dojo.io.iframe._currentDfd = null; 
        dojo.io.iframe.send({ 
          url: "/ExportGrid.json", 
          content:{data:str} 
        }); 
       }); 
     }; 
    <!-- Data Export Handler --> 

    var grid, store; 
    <!-- Grid Creation --> 
    dojo.ready(function(){ 

     store = new dojo.data.ItemFileWriteStore({ url: 'PopulateMsListEditor.json', urlPreventCache: 'yes', clearOnClose: 'yes' }); 

     grid = new dojox.grid.EnhancedGrid({ 
      store: store, 
      rowSelector: 'auto', 
      query: {id: "*"} , 
      plugins: { 
        exporter: true 
      }, 
      structure: [ 
        {field: 'msConstId', width: '20%', name: 'Milestone',hidden: true}, 
           {field: 'name', width: '20%', name: 'Milestone',editable: true} 
      ] 
     },"grid"); 

     grid.startup(); 

    }); 
    </script> 

    </head> 
    <body class="claro"> 
    <button id="exportBtn" data-dojo-type="dijit.form.Button" 
      data-dojo-props=" 
       iconClass:'dijitIconFile', 
       showLabel:true, 
       onClick:function() { 
        exportAll(); 
       }"> 
       Export to Excel 
    </button> 

    <div id="grid" style="width: 560px;height: 680px;"></div> 

    </body> 
</html> 

私はブログの投稿を書いていますので、再度検索する必要はありません。

Export Data from Grid in Dojo

PS:それは唯一の内部/社内のWebアプリケーション用のiFrameを使用することをお勧めします。

+0

バックエンドでサーブレットコードを教えてください。バックエンドでの処理方法 –

5

これはPHPサーバーサイドスクリプトを使用していることを達成する方法をです。

  grid.exportGrid("csv",{ 
      writerArgs: { 
        separator: "," 
        } 
      }, function(str){ 
        var form = document.createElement('form'); 
        dojo.attr(form, 'method', 'POST'); 
        document.body.appendChild(form); 
        dojo.io.iframe.send({ 
          url: "CSVexport.php", 
          form: form, 
          method: "POST", 
          content: {exp: str}, 
          timeout: 15000 
        }); 
        document.body.removeChild(form); 
        } 
      ); 

CSVexport.php:

<? 

    $time = time(); 
    header("Pragma: public"); 
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
    header("Content-type: application/csv"); 
    header("Content-Disposition: attachment; filename=\"grid_$time.csv\""); 
    $exportedData = $_POST['exp']; 
    echo $exportedData; 

    ?> 
0
<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>CISROMM - Master Milestone List Editor</title> 
     <!-- Include dojo dependencies --> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/document.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/enhanced/resources/claro/EnhancedGrid.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"> 
     <script src='http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js'></script> 
     <!-- Include dojo dependencies --> 

     <!-- Require the widgets --> 
     <script> 
       dojo.require("dojox.grid.EnhancedGrid"); 
       dojo.require("dojo.data.ItemFileWriteStore"); 
       dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter"); 
       dojo.require("dojo.io.iframe"); 
     <!-- Require the widgets -->          

     <!-- Data Export Handler --> 
       function exportAll(){ 
         dijit.byId("grid").exportGrid("csv", function(str){ 
           /*dojo.io.iframe.create('exportFrame', 'exportFrameLoaded()', ''); 
           dojo.io.iframe._currentDfd = null; 
           dojo.io.iframe.send({ 
              url: "/ExportGrid.json", 
              content:{data:str} 
           });*/ 
           //alert(str); 
           document.getElementById("output").value=str; 

          }); 
       }; 
     <!-- Data Export Handler --> 


     var grid, store; 
     <!-- Grid Creation --> 
     dojo.ready(function(){ 
       data = { 
       identifier: 'id', 
       label: 'id', 
       items: [] 
      }; 
      data_list = [ 
       { col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false }, 
       { col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false }, 
       { col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true }, 
       { col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true }, 
       { col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true }, 
       { col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true }, 
       { col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false } 
      ]; 
      var rows = 100; 
      for(var i=0, l=data_list.length; i<rows; i++){ 
       data.items.push(dojo.mixin({ id: i }, data_list[i%l])); 
      } 

     // global var "test_store" 
     store = new dojo.data.ItemFileWriteStore({data: data}); 



       grid = new dojox.grid.EnhancedGrid({ 
         store: store, 
         rowSelector: 'auto', 
         query: {id: "*"} , 
         plugins: { 
            exporter: true 
         }, 
         structure: [ 
            {field: 'col1', width: '20%', name: 'col1',hidden: false}, 
            {field: 'col2', width: '20%', name: 'col2',hidden: false}, 
            {field: 'col3', width: '20%', name: 'col3',hidden: false}, 
            {field: 'col4', width: '20%', name: 'col4',editable: true} 
         ] 
       },"grid"); 

       grid.startup(); 

     }); 
     </script> 

    </head> 
    <body class="claro"> 
     <button id="exportBtn" onClick="exportAll();"> 
           Export to Excel 
     </button> 

     <div id="grid" style="width: 560px;height: 680px;"></div> 
     <textarea id="output" style="width: 560px;height: 680px;"/> 

    </body> 
</html> 
関連する問題