分類
由于樹形菜單數據量比較大的時候，我們通過預加載數據的方式生成菜單可能對前后端交互延遲較長。所以研究了下可以預加載也可以異步加載數據的樹形菜單插件。
//預加載數據格式
var arr = [{
id: 1,
name: "一級",
open: true,
child: [
{
id: 5,
name: "二級",
type:'leaf'
},
{
id: 6,
name: "二級",
child: [
{
id: 7,
name: "三級",
type:'leaf'
},
{
id: 9,
name: "三級",
child: [
{
id: 10,
name: "四級",
child: [
{
id: 11,
name: "五級",
type:'leaf'
},
{
id: 12,
name: "五級",
type:'leaf'
}
]}
]}
]}]
}, {
id: 2,
name: "一級",
child: [
{
id: 3,
name: "二級",
pid: 2,
type:'leaf'
},
{
id: 3,
name: "二級",
pid: 2,
type:'leaf'
},{
id: 4,
name: "二級",
pid: 2,
type:'leaf'
}
]
},{
id: 8,
name: "一級",
pid: 0,
type:'leaf'
}
];
//無限級菜單生成
$("#toUl").LuTree({
arr: arr,
sign:true,
simIcon: "fa fa-file-o",//葉子圖標
mouIconOpen: " fa fa-folder-open",//展開圖標
mouIconClose:"fa fa-folder",//關閉圖標
callback: function(id) {
console.log("你選擇的id是" + id);
}
});
//無限級請求節點下的菜單
$("#ajaxUl").LuAjaxTree({
url:'./data.json',
simIcon: "fa fa-file-o",//葉子圖標
Demo:true,//模式，是否在服務器環境，true是演示模式，不需要后臺，false是需要后臺配合的使用模式
Method: "POST",//請求方法
mouIconOpen: " fa fa-folder-open",//展開圖標
mouIconClose:"fa fa-folder",//關閉圖標
callback: function(id) {
console.log("你選擇的id是" + id);
}
});
//可操作異步加載數據生成無限級樹形菜單
$("#updateUl").LuUpdateTree({
url:'./data.json',
simIcon: "fa fa-file-o",//葉子圖標
Demo:true,//模式，是否在服務器環境，true是演示模式，不需要后臺，false是需要后臺配合的使用模式
Method: "POST",//請求方法
mouIconOpen: " fa fa-folder-open",//展開圖標
mouIconClose:"fa fa-folder",//關閉圖標
callback: function(id) {
console.log("你選擇的id是" + id);
}
});
1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。
