文档章节

nodejs操作excel并配合edatagrid使用

c
 caiyezi
发布于 2016/11/08 20:23
字数 1576
阅读 3
收藏 0
点赞 0
评论 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

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

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

葡萄城控件技术团队
06/21
0
0
自动更新 Swagger 接口数据到 YApi 平台

本篇教程主要介绍如何自动更新 数据到 ,我们假设你已经能够熟练使用 YApi接口管理平台。 配置环境 yapi-cli 依赖 Node.js , 请安装不低于 7.6 版本的 Node.js,如果你的机器已经安装了 yapi...

suxiaoxin
05/11
0
0
使用MySQL Workbench修改表字符集

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

朱先忠老师
05/09
0
0
jQuery EasyUI使用教程之构建CRUD DataGrid

在本教程中,我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。 Step 1:在HTML标记中定义DataGrid <table id="dg" title="My U...

Miss_Hello_World
2015/10/13
88
2
在Ubuntu 14.04上设置生产环境可用的Node.js

在Ubuntu 14.04上设置生产环境可用的Node.js 提供:ZStack社区 前言 Node.js是一个开源的JavaScript运行时环境,开发者可以用它方便的构建服务器端应用和网络应用。Node.js可在Linux、OS X、...

zbill
06/26
0
0
Nodejs学习路线图

Node.js的介绍 Node.js的是建立在Chrome的JavaScript的运行时,可方便地构建快速,可扩展的网络应用程序的平台。Node.js使用事件驱动,非阻塞I/O模型,轻量、高效,可以完美地处理时时数据,...

数通畅联
2016/01/26
212
0
Node.js非阻塞IO和事件循环学习总结

  学习和使用Node.js已经有两个月,使用express结合mongoose写了一个web应用和一套RESTful web api,回过头来看Node.js官网首页对Node.js的介绍:Node.js uses an event-driven, non-block...

LeoG0816
2014/09/14
0
10
对战微信小程序,探究快应用的开发之路【一】

最近华为牵头国内几大厂商推出了Quikapp快应用,与微信小程序展开了入口之争,作为走在时代最前沿的程序猿,不了解一下,不动手操作一下,都对不起时代赋予我们的责任感了。来,跟我一起来探...

大王12
04/12
0
0
express4.x Request对象获得参数方法

最近看完慕课网 “node.js 建站攻略”后, 对mongodb 操作有了进一步认识, 为了进一步巩固该数据库知识, 于是使用学到的知识搭建一个最简单的mongoDemo. 搭建完成后已放到Github分享, 详情...

90后爱国
2015/07/22
0
0
PHP中Push(推送)技术的探讨

随着人们对Web即时应用需求的不断上升,Server Push(推送)技术在聊天、消息提醒尤其是社交网络等方面开始兴起,成为实时应用的数据流核心。这篇日志试图探讨的便是各种适合于PHP的Push的实现...

lg2045
2014/08/25
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
12分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
43分钟前
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
48分钟前
0
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
53分钟前
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
今天
0
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
今天
0
0
Centos7编译安装ntp-4.2.8p11

Centos7编译安装ntp-4.2.8p11 背景 因公司做等保评级,在进行安全漏洞检测时发现ntp需要升级到ntp-4.2.7p25以上版本,经过一番搜索,没有该版本及新版本ntp的yum安装包,所以只能编译安装了,...

阿dai
今天
0
0
antd pro 新增模块的步骤

index.js是整个项目的入口文件。 // 1. Initializeconst app = dva({ history: createHistory(),});// 2. Pluginsapp.use(createLoading());// 3. Register global modelapp.model......

灯下草虫鸣_
今天
0
0
Cisco VPN在win10下报Error 56的解决办法

问题描述 Cisco VPN在win10下报Error 56: The Cisco Systems, Inc. VPN Service has not been started 解决方案 方案一:在计算机管理-》服务 查看Cisco Systems, Inc. VPN Service服务是否存...

chenfj_fer
今天
0
0
Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部