nodejs操作excel并配合edatagrid使用
博客专区 > caiyezi 的博客 > 博客详情
nodejs操作excel并配合edatagrid使用
caiyezi 发表于1年前
nodejs操作excel并配合edatagrid使用
  • 发表于 1年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 108
码字总数 0
×
caiyezi
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: