nodejs操作excel并配合edatagrid使用

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文件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

27110
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4355
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

6906
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3268
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2820
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8368
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2965
来自专栏魂祭心

原 canvas绘制clock

5004

扫码关注云+社区