easyUI tree点击文字展开节点

最新推荐文章于 2018-09-09 20:04:49 发布

转载最新推荐文章于 2018-09-09 20:04:49 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/smartsmile/blog/815036

文章标签：

#javascript #ViewUI

本文介绍如何优化EasyUI框架中的树形结构交互，通过在选择事件中加入节点展开功能，提升用户体验，尤其是在老旧电脑和大龄用户群体中。文章详细解释了如何使用JavaScript在onSelect事件中添加节点展开代码，以及如何实现双击节点名称来展开或折叠节点。

easyUI默认展开树的时候，点击节点前边的黑色小三角，这样操作存在不人性化的地方，在实际使用中由于老旧电脑的存在和大龄使用者的眼花经常点不准；因此要实现点击节点名称展开的方式，其实就是在展开事件上加一个展开该节点的方法。

在onSelect事件中添加

$(this).tree('expand',node.target);

当选中该节点的时候，展开该节点下的节点，该方法只会展开下一级节点，并不会展开子节点下的节点。

如果要展开所有节点：

$(this).tree('expandAll',node.target);

$(document).ready(function(){  
    $('#dept').layout();  
    $('#deptTree').tree({  
        checkbox:false,  
        url:'loadDeptJson.action?node=-1',  
        onBeforeExpand:function(node,param){  
            $('#deptTree').tree('options').url="loadDeptJson.action?node="+node.id;  
        },  
        onSelect:function(node){  
            $('#deptContent').load("viewDepartment.action?department.id="+node.id);  
            $(this).tree('expand',node.target);  
        },  
    });  
});

//双击文字实现双击展开/折叠
onDblClick: function (node) {
	$(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
	node.state = node.state === 'closed' ? 'open' : 'closed';
}

转载于:https://my.oschina.net/smartsmile/blog/815036