前端js将ztree导出到excel文件中

前端js将ztree导出到excel文件中

月光魔力鸭

2023-12-21 10:09 阅读 342 喜欢 0

近期需求:将一棵树导出到excel中,树是ztree,通过插件Table2excel导出table到excel中。

依赖

获取ztree的节点

var list = treeObj.getNodes();

将ztree的nodes转化为table 数组并获取对应的合并数据

//将ztree导出到excel中
var list = treeObj.getNodes();
//递归循环list,(children)
var arr = [];
var maxRows = 0;
function getDeepData(children,level){
    for(var i=0;i<children.length;i++){
        var obj = children[i];
        var name = obj.name;
        var children2 = obj.children;
        if(!children2 || children2.length == 0){//最下一层级
            arr[maxRows] = arr[maxRows]||[];
            arr[maxRows][level] = {name:name,rowspan:1};
            maxRows ++;
        }else{
            arr[maxRows] = arr[maxRows]||[];
            arr[maxRows][level] = {name:name};
            var last = maxRows;
            getDeepData(children2,level+1);
            arr[last][level].rowspan = maxRows - last;
        }
    }
}
getDeepData(list,0);

构建table html

var allHtml = '';
for(var i=0;i<arr.length;i++){
    var row = arr[i];
    var html = '<tr>';
    for(var j=0;j<row.length;j++){
        html += '<td rowspan="'+(null == row[j]||undefined == row[j] ? 1 :(row[j].rowspan||1))+'" style="'+(null == row[j]||undefined == row[j]? 'display:none;' : '')+'">'+(null == row[j]||undefined == row[j]  ? '' : row[j].name)+'</td>';
    }
    html += '</tr>';
    allHtml += html;

}
$('#table').append(allHtml);

导出excel

new Table2Excel().export($('#table'),"文件名");

table2excel : https://github.com/rusty1s/table2excel

转载请注明出处: https://chrunlee.cn/article/export-ztree-to-excel.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
先记录下,不定哪天就查了..防止找不到或不全
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的
需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
nvm install 16.15.0 : The process cannot access the file because it is being used by another process
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。