将 dojo 数据网格导出到 CSV 文件

发布于 2024-10-08 01:26:06 字数 121 浏览 10 评论 0原文

我正在寻找一个 Javascript 函数,它将把我的数据网格(zero.grid.DataGrid)导出到一个 CSV 文件或类似的文件中,该文件可以由电子表格应用程序打开。

有没有标准的方法可以做到这一点..

I am looking to get a Javascript function which will export my datagrid (zero.grid.DataGrid) full of data into a CSV file or something similar which can be opened by a spreadsheet application.

Is there any standard way of doing this out there..

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

淡淡の花香 2024-10-15 01:26:06

这就是使用 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;

  ?>

This is how you would accomplish that using a PHP server-side script.

           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;

  ?>
猫性小仙女 2024-10-15 01:26:06

我在使用 Exporter 插件和增强网格(使用 servlet 作为后端)时遇到了困难。最后我通过使用 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>

我已经写了一篇博客文章,这样我就不必再次搜索。

在Dojo中从Grid导出数据

PS:推荐使用iFrame仅适用于内部/内部 Web 应用程序。

I had tough time with using Exporter plugin with EnhancedGrid using servlet as backend. Finally I made it work by using 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>

I have written a blog post so that I don't have to search again.

Export Data from Grid in Dojo

PS: It is recommended to use iFrame only for internal/in-house web applications.

明媚殇 2024-10-15 01:26:06

我正在寻找相同的内容并得到你的问题,但我找到了答案...

你必须使用 dojox.Enhancedgrid 的 Exporter 插件

“Exporter 插件提供将网格数据导出为给定格式的功能”。

http://docs.dojocampus.org/dojox/grid/EnhancedGrid/plugins/Exporter问候

I'm searching for the same and get your question, but i find the answer...

You must use the Exporter plugin for the dojox.Enhancedgrid

"Exporter plugin provides functions to export the grid data into a given format".

http://docs.dojocampus.org/dojox/grid/EnhancedGrid/plugins/Exporter

Regards

早茶月光 2024-10-15 01:26:06
<!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>
<!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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文