var currtTreeArr = []; //当前树列表数组
var treeData = []; //根节点数据
var treeHistoryArr = []; //历史打开的树,用于回退,进入到其他节点
$(".mui-table-view").on("click", ".mui-navigate-right", function () { //列表冒泡监听点击
var idx = $(this).attr("index");
if (currtTreeArr[idx].children.length) {
//把点击项的子树显示出来,并添加当前点击的子树到历史
currtTreeArr = currtTreeArr[idx].children;
treeHistoryArr.push(currtTreeArr);
renderTree(currtTreeArr);
} else {
renderLeafNode(currtTreeArr[idx].id); //叶子节点
}
});
//渲染树结构列表
function renderTree(data) {
if (treeHistoryArr.length > 1) {
$("#goback").show(); //显示返回上一级按钮
} else {
$("#goback").hide();
}
var dom = "";
data.forEach(function (item, idx) {
dom +=
' <li class="mui-table-view-cell"><a class="mui-navigate-right" index=' +
idx +
">" +
item.name +
"</a></li>";
});
$(".mui-table-view").empty().html(dom);
}
//显示树
function showTreeList() {
treeHistoryArr = [];
currtTreeArr = [{ //获取到的树数据
name: '根节点',
id: 1,
children: [{
name: '一级1',
id: 11,
children: [...]
}, {
...
}]
}, ...];
renderTree(currtTreeArr);
treeHistoryArr.push(currtTreeArr);
mui(".mui-off-canvas-wrap").offCanvas("show");
}
function renderLeafNode(id) {
...叶子节点的渲染
}
mui 侧栏菜单实现多级树数据列表,返回上一级树
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 前言: 想写点bug,无奈手受伤了,好久没能写了。终于明白杨过为何独臂之后反喜重剑、剑术更胜之前了,两只手的时候,...
- getCurrentPages() 应用场景:pageA为员工列表页pageB为新建员工页从pageA到pageB...
- 最近写项目的时候发现把导航栏隐藏了,返回上一级之后上一级的导航栏也变透明了,为了解决这个问题找了很多的方法,发现这...
- 5月以来,哪怕对市场风向再不敏感的人,也感觉到阵阵凉意。二级市场连续下挫,一级市场融资环境恶化,不论企业融资数量还...