jQuery LigerUI ligerTree展开指定节点

概述

如果你的项目正在使用 LigerUI 框架恭喜中将了，ligerTree.js达不到我的期望，比如最近接手个项目，框架已经定型用的LigerUI，发现ligerTree.js不能展开指定节点，只有全展开、展开几级节点等，官方demo，如果要指定到某一个节点，那就需要修改源码了。

使用场景

那么问题来了，在什么情况下需要指定到节点呢？比如有这样一个需求，对树结构数据的维护，页面左则为树结构，右则为选择树节点后的列表数据，点击新增按钮在当前节点新增一条数据，要求新增完成后返回上一页面后，刷新数据，并记住所选择的树节点。如下图UI原型



当前选择的是钥匙节点 ，数据展示为右则表格，刷新数据嘛肯定想到的是把tree与grid重新reload一下就完了，这样是没错但是别忘了有个重要需求，刷新完数据后，tree要记住上一次选择的节点位置并展开。反正把源码轮了几遍没有此方法，只有个 selectNode 方法，是选中节点的，所以就在参考此方法体新增了个展开批定节点并选中的方法expandNode。啰嗦了好多来看看源码吧。

源码

//展开指定节点并选中及响应select回调(参数：条件函数、Dom节点或ID值)
expandNode: function (expandNodeParm) {
var g = this, p = this.options;
var clause = null;
if (typeof (expandNodeParm) == "function") {
clause = expandNodeParm;
}
else if (typeof (expandNodeParm) == "object") {
var treeitem = $(expandNodeParm);
var treedataindex = parseInt(treeitem.attr("treedataindex"));
var treenodedata = g._getDataNodeByTreeDataIndex(g.data, treedataindex);
var treeitembody = $(">div:first", treeitem);
if (!treeitembody.length) {
treeitembody = $("li[treedataindex=" + treedataindex + "] >div:first", g.tree);
}
if (p.checkbox) {
$(".l-checkbox", treeitembody).removeClass("l-checkbox-unchecked").addClass("l-checkbox-checked");
}
else {
$("div.l-selected", g.tree).removeClass("l-selected");
treeitembody.addClass("l-selected");
}
g.trigger('select', [{ data: treenodedata, target: treeitembody.parent().get(0)}]);

//展开当前节点
$("div.l-expandable-close:first", treeitem).click();
//得到当前数据的节点等级，根节点=1
var currentLevel = parseInt(treeitem.attr("outlinelevel"));
var currenttreeitem = treeitem;
//只需要展开到第二2级
for (var i = currentLevel - 1; i >= 2; i--) {
//获取父节点
currenttreeitem = currenttreeitem.parent().parent("li");
$("div.l-expandable-close:first", currenttreeitem).click();
}
return;
}
else {
clause = function (data) {
if (!data[p.idFieldName]) return false;
return strTrim(data[p.idFieldName].toString()) == strTrim(expandNodeParm.toString());
};
}
$("li", g.tree).each(function () {
var treeitem = $(this);
var treedataindex = parseInt(treeitem.attr("treedataindex"));
var treenodedata = g._getDataNodeByTreeDataIndex(g.data, treedataindex);
if (clause(treenodedata, treedataindex)) {
g.expandNode(this);
}
});
}

使用

function t_reload() {
tree.clear();
tree.reload();
//得到选择节点数据ID
var id = $("#hidQuestionTypeId").val();
if (id > 0 )//数据重载后，记忆展开选择节点
tree.expandNode(id);
}