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);
    }

欢迎关注公众号，每天为您推送“人生感悟、说话技巧、职场规则、职场成长”