jQuery LigerUI ligerTree展开指定节点

js 专栏收录该内容
1 篇文章 0 订阅

概述

如果你的项目正在使用 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);
    }

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

  • 3
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值