js生成組織結構樹（原創）

2022-08-23 22:24:15 字數 1093 閱讀 3469

最近專案中需要使用js生成組織結構樹，開始找到了orgcharts.js,但是使用了發現樣式都是固定的，事件控制資料獲取都很麻煩，無法滿足需求。只好自己寫了。

下面分享出來，有用到的同學別忘了點讚哦。

css：

.grouptable .lightgroupli,


.grouptable .childrengroupli 


.downchildrens,


.childrengroupli 


.lightgroupli:hover 


.left 


.right 


.top 


.bottom
js：說下原理：

1.table布局，生成父節點

2.判斷是否有子節點，生成td，用colspan展開

3.遞迴在父節點td生成子節點

function buildnode(arr, divid, tdnode, type, ischild) 


} else 


if (a == aaarrr.length * 2 - 1) 


td_line += td;


}} else 


itable = '' +


'' +


'' +


''+img + rec.name + '


' + '' +


'' +


'' + '' + td_line + '' +


'' +


'';}


var otd = $('').html(itable).attr();


// console.log('asdf',tdnode);


if ($('.' + tdnode)[0]) else else );


var otbody = $('').attr('class', 'groupbody');}}


if (aaarrr.length > 0) }}
效果圖：

js遞迴生成樹形結構

後端獲取json陣列，成樹結構，下面直接上 首先集合的資料格式是這樣的。資料 生成樹結構 load generateoptions params parent.children this.getchilds param.id,params 獲取子節點 result.push parent retur...

js遞迴生成樹形結構

情景一 返回的資料格式為array沒有層級結構 靠pid關聯 需要處理資料成樹狀結構 參考若依框架 構造樹型結構資料 param data 資料來源 param id id欄位 預設 id param parentid 父節點字段 預設 parentid param children 孩子節點字段 ...

js 根據 目錄結構,生成tree結構

根據 aws s3 獲取 bucket 下的 所有檔案 返回格式如下 var arr root root a root a new b.png root a qa root a qa 新建文字文件 3 txt root asdfasdfasdfasdfasdfasdfasdf.txt root b ...