乾貨 把ajax獲取的資料轉化成樹狀結構（並做成多級聯動效果）
阿新 • • 發佈：2019-02-16
1.首先通過ajax獲取資料，此處省略，直接貼出獲取到的資料格式
var arr = [{ id: 1, name: "一級標題", pid: 0 }, { id: 2, name: "二級標題", pid: 0 }, { id: 3, name: "2.1級標題", pid: 2 }, { id: 4, name: "2.2級標題", pid: 2 }, { id: 5, name: "1.1級標題", pid: 1 }, { id: 6, name: "1.2級標題", pid: 1 }, { id: 7, name: "1.21級標題", pid: 6 }, { id: 8, name: "三級標題", pid: 0 }, { id: 9, name: "1.22級標題", pid: 6 }, { id: 10, name: "1.221級標題", pid: 9 }, { id: 11, name: "1.2211級標題", pid: 10 }, { id: 12, name: "1.2212級標題", pid: 10 }
function proJSON(oldArr, pid) { var newArr = []; var self = this; oldArr.map(function(item) { if(item.pid == pid) { var obj = { id: item.id, value: item.name } var childs = self.proJSON(oldArr, item.id); if(childs.length > 0) { obj.childs = childs } newArr.push(obj) } }) return newArr; };
]; 2.定義函式 proJSON將獲取到的資料轉化為樹狀結構
3.呼叫函式，將原始資料轉化為樹狀結構資料function proJSON(oldArr, pid) { var newArr = []; var self = this; oldArr.map(function(item) { if(item.pid == pid) { var obj = { id: item.id, value: item.name } var childs = self.proJSON(oldArr, item.id); if(childs.length > 0) { obj.childs = childs } newArr.push(obj) } }) return newArr; };
$(function(){
var testdata = proJSON(arr,0);
console.log(testdata);
})[{
id: 1,
value: "一級標題",
}, {
id: 2,
value: "二級標題",
childs:[{
id:3,
value:"2.1級標題"
}]
}
];4.分享一個網上找的極好的外掛mobileSelect.js
在實際開發過程中我們經常會遇到多級聯動，比如省市區多級聯動等等，之前就做過一個專案需要從資料庫獲取省市區的資料再在移動端展示出來，當時使用的外掛是網上找的一個叫做LArea.js的外掛，需要把獲取的資料改成該外掛自帶資料的格式，用起來還不錯，id和value都可以回寫在標籤中，但是有個很大的侷限：只支援三級聯動。所以當我發現以下外掛的時候簡直如獲珍寶！！！LArea.js有的它都有，而且它支援無限級聯動，使用時的資料結構正是上面所講的樹狀結構，也就是說，當你拿到資料庫的資料，proJSON一下，把資料塞進呼叫函式中就可以坐等一個完美的頁面了（而且該外掛是原生js寫的不依賴jquery,只是我習慣用jquery所以引入了jquery外掛），廢話不多說，直接上程式碼。
html部分
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>多層級下拉框</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="wap-font-scale" content="no">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/public.css">
<!-- 引入樣式和js檔案 -->
<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/jquery.min.js"></script>
<script src="js/mobileSelect.js" type="text/javascript"></script>
</head>
<body>
<div class="contain">
<div class="fixWidth">
<div class="nav">
<h1>mobileSelect Demo</h1>
</div>
<div class="demo">
<div id="test">測試下拉框</div>
</div>
</div>
</div>
</body>
</html>var mobileSelect5 = new MobileSelect({
trigger: '#test',//下拉框id
title: '測試下拉框',
wheels: [
{data : testdata}//樹狀結構資料
],
transitionEnd:function(indexArr, data){
// console.log(data);
},
callback:function(indexArr, data){//回撥，此處即可將選擇的資料post到資料庫
console.log(data);
$("#test").attr("id",data[data.length-1].id);
}
});完活
https://github.com/onlyhom/mobileSelect.js
本人職場小白，剛畢業，如有問題還請各位大神多多指教