CSS實現樹形結構 js載入資料

看到一款樹形結構，比較喜歡它的樣式，就參照它的外觀自己做了乙個，練習一下css。

做出來的效果如下：

二年級三年級

樹的dom結構：

<
div 
class
="tree"
>
<
ul>
<
li>
<
span
><
i class
="fa fa-minus-circle"
>
i>拉莫小學
span
>
<
ul>
<
li>
<
span
><
i class
="fa fa-minus-circle"
>
i>一年級
span
>
<
ul>
<
li><
span
>一班
span
>
li><
li><
span
>二班
span
>
li>
ul>
li>
<
li>
<
span
>二年級
span
>
li>
<
li>
<
span
><
i class
="fa fa-minus-circle"
>
i>三年級
span
>
<
ul>
<
li><
span
>一班
span
>
li>
<
li><
span
>二班
span
>
li>
<
li><
span
>三班
span
>
li>
ul>
li>
ul>
li>
ul>
div>

css**：

* tree.css zyj 2018.4.21

*/ul,li.tree.tree span.tree ul.tree ul>li.tree>ul

/** 水平方向連線

*/.tree>ul ul>li:after

/** 垂直方向連線

*/.tree ul>li:not(:last-child):before.tree ul>li:last-child:before

/** 控制滑鼠移上去的顏色

*/.tree span:hover, .tree span:hover+ul span.tree span:hover, .tree span:hover+ul span, .tree span:hover+ul li:before, .tree span:hover+ul li:after

/** 摺疊圖示

*/.tree .fa:before.tree .fa-minus-circle, .tree .fa-plus-circle

裡面引的fontawesome圖示沒法載入進來，導致摺疊按鈕顯示不出，下面是原始樹狀圖的截圖：

資料是我用js載入的，寫了個載入資料的tree.js檔案，原始碼如下：

/*
* tree.js zyj 2018.4.22 */(
function
(name);
defaultdateformat =;
function
getdataformat(dataformat)
for(index in
defaultdateformat)
return
dataformat
}function
inittreejs(name)
window[name] =outer;
initfoldicon($('.tree'));
}function
checktreenameused(name)
return
false
; }
function
initfoldicon(target)
else
if(ele.hasclass('fa-plus-circle'))})}
function
getjqueryobjectbyselector(selector)
if(!ele.hasclass('tree'))
if(ele.length != 1)
return
ele;
}function
setdata(selector, data, dataformat)
if(!data)
if(!data.length)
dataformat =getdataformat(dataformat);
dataformat.topelement = true
; initfoldicon(ele);
}function
gettreelist(data, dataformat)
inittreejs(name);
}('tree'))

偷懶沒寫注釋，tree.js中目前只寫了乙個對外的介面 tree.setdata(selector, data, dataformat) 。引數selector是jquery選擇器，data是資料，dataformat是資料格式。

比如載入上圖的資料：

var datatest =,]},
,,,]
}]};
tree.setdata('.tree', datatest);

由於後台載入的資料不一定是按照,...]}這種結構，所以留了dataformat引數，自己去定義資料格式。

簡單舉個例子，假如後台資料格式是

var data =
, ,,]
}

那麼dataformat可以定義為

var dataformat =,
childname : 'subweb'}

至於效果，讀者自己去試咯。

js實現樹形結構

js實現樹形結構 1 html 2 js載入資料 function function loadtree ul thirdli ul li ul li 查詢所有一級節點下的如果找到，則給節點中除了最後乙個節點以外的節點加浮動，如果沒有則給所有的二級加浮動 for var i 0 i parent...

js將資料轉成樹形結構

有如下資料，陣列中為一條條單個資料，每條資料都有唯一的id標識，pid表示此條資料的父級 id，根據pid和id的對應關係，實現乙個函式將資料轉成樹形結構資料。var data 思路根據 id 唯一這一條件，可先使用物件或者map結構名為obj 將資料儲存起來，鍵名就為 id，值為對應資料，然...

js處理樹形結構資料過濾

最近專案經常遇到後台介面返回整個樹形結構，而前端展示只需要展示部分型別的資料，需要過濾一下，所以整理了乙個過濾方法。非層級結構時過濾非常簡單，只需要一層就夠了 export function filtertree tree 而要做到子節點也過濾時就需要用到遞迴去過濾思路梳理迴圈陣列，然後過濾資...

CSS實現樹形結構 js載入資料

js實現樹形結構

js將資料轉成樹形結構

js處理樹形結構資料過濾

相關推薦