文档章节

nodejs操作excel并配合edatagrid使用

c
 caiyezi
发布于 2016/11/08 20:23
字数 1576
阅读 3
收藏 0

nodejs读取文件夹下子文件(夹)名称:

/**
 * 查询tmp文件夹下子文件夹名称
 */
router.post("/tmpList", function (req, res) {
    fs.readdir("./public/tmp", function (err, files) {
        var jsonArray = new Array();                             //[{id:0,name:'陕西省'},{id:1,name:'福建省'},{id:2,name:'陕西省'}]
        jsonArray.push({id: "", name: '请选择省或地区'});
        for (var index in files) {
            var jsonObj = {};
            jsonObj.id = index;
            jsonObj.name = files[index];
            jsonArray.push(jsonObj);
        }
        res.send(jsonArray);
    });
});

读取之后渲染显示:

<input style="width: 150px;" class="easyui-combobox" id="province" name="province" data-options="valueField:'id',textField:'name',url:'/market/tmpList',panelHeight:'300px;',editable:false">

使用node-xlsx加载、生成excel文件(后缀名为.xlsx):

var xlsx = require("node-xlsx");
var path = require('path');
var url = path.join(__dirname + "/" + req.body.url);
var obj = xlsx.parse(url);
var data = obj[0].data;

其中,url为*.xlsx文件路径,data为读取的excel数据(data[0]为excel表头数据,为一个数组,data[i]分别为第i+1行数据,也是一个数组),使用如下生成一个excel文件:

var fs = require("fs");
var xlsx = require("node-xlsx");
var path = require('path');
var file = xlsx.build([{name: "Sheet1", data: dataArray}]);
fs.writeFileSync(__dirname + "/" + url, file, "binary");

其中,url同样为*.xlsx路径(含后缀名),dataArray的格式为:

[ [ '姓名', '性别', '学号', '年龄', '电话', '地址', '是否党员' ],[ '张三', '男', '000', '13' ],[ '李四', '男', '001', '14' ] ]

其中,[ '姓名', '性别', '学号', '年龄', '电话', '地址', '是否党员' ] 为生成的excel表头,其余为对应的内容(注意:内容数量和表头数不匹配时,空缺默认留空)。

 

页面效果:

依次选择各个区域后,单击“加载模板”即可读取excel数据显示,读取的excel内容如下:

可以看出是完全读取的excel内容显示,页面部分实现:

<table id="dg" title="行情模板" idField="id" style="width:100%;position: absolute;top: 50px;bottom: 0px;overflow-x: hidden"
       toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true" >
</table>
<div id="toolbar">
    <div style="margin-top: 10px;margin-bottom: 3px;margin-left: 2px;font-size: 14px;">请选择要修改的行情模板:</div>
    <div style="float: left;margin-top: 10px;margin-left: 2px;">
        商品区域:<input style="width: 150px;" class="easyui-combobox" id="province" name="province"
                    data-options="valueField:'id',textField:'name',url:'/tmpList',panelHeight:'300px;',editable:false">
        <input style="width: 150px;" class="easyui-combobox" id="city" name="city"
               data-options="valueField:'id',textField:'name',panelHeight:'auto',editable:false">
    </div>
    <div style="float: left;margin-top: 10px;margin-left: 5px;">
        商品大类:<input class="easyui-combobox" id="bigType"
                    data-options="textField:'name',valueField:'id',url:'',panelHeight:'auto',editable:false"
                    style="width: 150px;"/>
    </div>
    <div style="margin-top: 10px;float: left;margin-left: 5px;">
        品种:<input class="easyui-combobox" id="variety"
                  data-options="textField:'name',valueField:'id',url:'',panelHeight:'auto',editable:false"
                  style="width: 150px;"/>
    </div>
    <input type="hidden" id="headData"/>
    <a class="easyui-linkbutton" plain="true" iconCls="icon-2012080412111" style="margin-top: 8px;margin-left: 5px;" href="javascript:void(0)" onclick="javascript:loadTemplet()">加载模板</a>
    <div style="clear: both">&nbsp;</div>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
       onclick="javascript:add()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
       onclick="javascript:del()">删除</a>
    <!--<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"-->
       <!--onclick="javascript:update()">修改</a>-->
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true"
       onclick="javascript:save()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true"
       onclick="javascript:cancel()">撤销</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-arrow_up" plain="true"
       onclick="javascript:moveUp()">上移</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-arrow_down" plain="true"
       onclick="javascript:moveDown()">下移</a>
</div>

主要js代码实现:

<script type="text/javascript">
        var editFlag = undefined;//设置一个编辑标记
        var url = null;
        jQuery(function () {
            jQuery("#dg").edatagrid({});
            jQuery("#variety").combobox({
                onSelect: function (record) {
                    var proName = jQuery("#province").combobox("getText");
                    var cityName = jQuery("#city").combobox("getText");
                    var bigTypeName = jQuery("#bigType").combobox("getText");
                    var varietyName = jQuery("#variety").combobox("getText");
                    if (varietyName == "请选择品种") {
                        jQuery.messager.show({title: "提示", msg: "请先选择价格行情区域"});
                        return;
                    }
                    url = "../public/tmp/" + proName + "/" + cityName + "/" + bigTypeName + "/" + varietyName + "/" + varietyName + ".xlsx";
                    jQuery.post("/tmpHead",{
                        url:url
                    },function(result){
                        jQuery("#headData").val(result.data);
                    });
                }
            });
        });
        function add(){
//            if(jQuery("#dg").edatagrid("getRows") == null || jQuery("#dg").edatagrid("getRows") == ""){
//                jQuery.messager.show({title:"提示",msg:"请先加载模板"});
//                return;
//            }
            jQuery("#dg").edatagrid("addRow");
        }
        function cancel(){
            jQuery("#dg").edatagrid("rejectChanges");
            jQuery("#dg").edatagrid("unselectAll");
            editFlag = undefined;
        }
        function del(){
            if(jQuery("#dg").edatagrid("getRows") == null || jQuery("#dg").edatagrid("getRows") == ""){
                jQuery.messager.show({title:"提示",msg:"请先加载模板"});
                return;
            }
            var rowIndex = editFlag;            //要删除的行索引
            if(!rowIndex){
                jQuery.messager.show({title:"提升",content:"请先选择要删除的行"});
                return;
            }
            jQuery.messager.confirm("提示","确定删除?",function(r){
                if(r){
                    jQuery('#dg').edatagrid('deleteRow', rowIndex);
                    var data = JSON.stringify(jQuery('#dg').edatagrid("getRows"));     //获取删除后的数据,后台重新生成Excel
                    jQuery.post("/tmpSave",{
                        data:data,
                        url:url,
                        headData:jQuery("#headData").val()
                    },function(result){
                        jQuery.messager.show({title:"提示",msg:"删除成功!"});
                    });
                }
            })
        }
        function save(){
            if(jQuery("#dg").edatagrid("getRows") == null || jQuery("#dg").edatagrid("getRows") == ""){
                jQuery.messager.show({title:"提示",msg:"请先加载模板"});
                return;
            }
       for(var j = 0; j < jQuery("#dg").edatagrid("getRows").length; j++){    //循环校验
                if(!jQuery('#dg').edatagrid('validateRow',j)){
                    jQuery.messager.show({title:"提示",msg:"输入内容要求20字符以内且不能为空!"});
                    return;
                }
            }   
            jQuery('#dg').edatagrid("acceptChanges");     //获取删除后的数据,后台重新生成Excel
            var data = JSON.stringify(jQuery('#dg').edatagrid("getRows"));
            jQuery.post("/tmpSave",{
                data:data,
                url:url,
                headData:jQuery("#headData").val()
            },function(result){
                jQuery('#dg').edatagrid("reload");
                jQuery.messager.show({title:"提示",msg:"保存成功!"});
            });
        }
        function moveUp() {
            var row = jQuery("#dg").edatagrid('getSelected');
            var index = jQuery("#dg").edatagrid('getRowIndex', row);
            mysort(index, 'up', 'dg');
        }
        function moveDown(){
            var row = jQuery("#dg").datagrid('getSelected');
            var index = jQuery("#dg").datagrid('getRowIndex', row);
            mysort(index, 'down', 'dg');
        }
        function mysort(index, type, gridname) {
            if ("up" == type) {
                if (index != 0) {
                    var toup = jQuery('#' + gridname).edatagrid('getData').rows[index];
                    var todown = jQuery('#' + gridname).edatagrid('getData').rows[index - 1];
                    jQuery('#' + gridname).edatagrid('getData').rows[index] = todown;
                    jQuery('#' + gridname).edatagrid('getData').rows[index - 1] = toup;
                    jQuery('#' + gridname).edatagrid('refreshRow', index);
                    jQuery('#' + gridname).edatagrid('refreshRow', index - 1);
                    jQuery('#' + gridname).edatagrid('selectRow', index - 1);
                }
            } else if ("down" == type) {
                var rows = jQuery('#' + gridname).edatagrid('getRows').length;
                if (index != rows - 1) {
                    var todown = $('#' + gridname).edatagrid('getData').rows[index];
                    var toup = $('#' + gridname).edatagrid('getData').rows[index + 1];
                    jQuery('#' + gridname).edatagrid('getData').rows[index + 1] = todown;
                    jQuery('#' + gridname).edatagrid('getData').rows[index] = toup;
                    jQuery('#' + gridname).edatagrid('refreshRow', index);
                    jQuery('#' + gridname).edatagrid('refreshRow', index + 1);
                    jQuery('#' + gridname).edatagrid('selectRow', index + 1);
                }
            }
        }
        function loadTemplet(){
            var proName = jQuery("#province").combobox("getText");
            var cityName = jQuery("#city").combobox("getText");
            var bigTypeName = jQuery("#bigType").combobox("getText");
            var varietyName = jQuery("#variety").combobox("getText");
            if (varietyName == "请选择品种") {
                jQuery.messager.show({title: "提示", msg: "请先选择要加载的模板"});
                return;
            }
            var url = "../public/tmp/" + proName + "/" + cityName + "/" + bigTypeName + "/" + varietyName + "/" + varietyName + ".xlsx";
            var headData = jQuery("#headData").val().split(",");
            jQuery("#dg").edatagrid({
                url:"/tmpShow",
                nowrap: true,
                loadMsg : "正在努力为您加载数据",
                columns: [[
                    {
                        field: 'trade', title: headData[0], width: "15%", align: 'center', editor: {
                        type: 'text',
                        options: {
                            required: true
                        }
                    }
                    },
                    {
                        field: 'standard', title: headData[1], width: "15%", align: 'center', editor: {
                        type: 'text',
                        options: {
                            required: true
                        }
                    }
                    },
                    {
                        field: 'material', title: headData[2], width: "15%", align: 'center', editor: {
                        type: 'text',
                        options: {
                            required: true
                        }
                    }
                    },
                    {
                        field: 'steelFactory', title: headData[3], width: "15%", align: 'center', editor: {
                        type: 'text',
                        options: {
                            required: true
                        }
                    }
                    },
                    {
                        field: 'price', title: headData[4], width: "10%", align: 'center'
                    },
                    {
                        field: 'change', title: headData[5], width: "15%", align: 'center'
                    },
                    {
                        field: 'remark', title: headData[6], width: "15%", align: 'center'
                    }
                ]],
                onBeforeLoad: function (param) {
                    param.url = url;
                },
                onAfterEdit : function(rowIndex, rowData, changes) {
                    editFlag = undefined;//重置
                    jQuery("#dg").edatagrid("unselectAll");
                },
                onDblClickCell : function(rowIndex, field, value) {//双击该行修改内容
                    if (editFlag != undefined) {
                        jQuery("#dg").edatagrid('endEdit', editFlag);//结束编辑,传入之前编辑的行
                        jQuery("#dg").edatagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行
                        editFlag = rowIndex;
                    }
                    if (editFlag == undefined) {
                        jQuery("#dg").edatagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行
                        editFlag = rowIndex;
                    }
                },
                onClickCell : function(rowIndex, field, value) {//双击该行修改内容
                    editFlag = rowIndex;
                }
            });
        }
    </script>

 

 

可以直接进行修改、保存、撤销、新增以及上移、下移操作,保存后,数据直接提交至后台直接重新生成excel文件。

 

本文转载自:http://www.cnblogs.com/vipzhou/p/5013373.html

共有 人打赏支持
下一篇: moment常用操作
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
私信 提问
SpreadJS 在线Excel使用进阶指南 - 利用 NPM 管理你的项目

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/powertoolsteam/article/details/80813491 前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布...

powertoolsteam
2018/06/26
0
0
SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM,作为管理Node.js库最有力的手段,解决了很多NodeJS代码部...

葡萄城控件技术团队
2018/06/21
0
0
二进制数组实战 - 纯前端导出Excel文件

以往在处理数据导出相关工作时,个人习惯使用脚本语言来完成,例如nodejs、ruby等,但它们对环境都有一定依赖。在浏览器的环境下,如何完成该类型操作?下面会给出一种简单且兼容性较好的方案...

腾讯IVWEB团队
01/06
0
0
如何选用客户端的技术

最近开发了一款CS的应用,说是CS,服务端其实采用的是Flask提供的RESTFul形式的API。本来前段使用Ajax(BS)这种就行了,后来发现需要这种纯BS模式不行,因为为该应用需要用户本地启用一个自...

fsxchen
2016/09/07
401
0
使用MySQL Workbench修改表字符集

问题 MySQL官方网站提供了诸多免费的数据库操作工具,其中, Workbench是一款免费的极佳可视化数据库管理工具,你只需要下载最新版本,即可随心所欲地管理以往许多其他版本的数据库,当然配合...

朱先忠老师
2018/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
51分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
3
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
6
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部