想在挪动端应用树结构抉择我的项目,然而在挪动端显示体验太差怎么办?应用栈构造存储树历史,应用相似侧栏菜单的形式实现:
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) {... 叶子节点的渲染}