修改EsayUi 中 tree 的原有样式，变为according 之类的样式，且子菜单显示在右侧...

转载于 2016-09-19 13:01:00 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vali/p/5884783.html

文章标签：

#javascript #ViewUI

本文介绍如何在easyUI框架中自定义树形组件(tree)的展开样式，通过JavaScript代码实现对节点展开时的样式调整，包括位置、尺寸及滚动条等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyUi 中 tree 框架的属性有：

修改原有展开样式代码如下：

 1 onExpand:function(node,param){
 2             $(this).children("li").each(function(){
 3                 if($(this).children("ul").length>0){
 4                     $(this).children("ul").hide();
 5                     $(this).children("div.tree-node").find(".tree-hit").addClass("tree-collapsed").removeClass("tree-expanded");
 6                     $(this).children("div.tree-node").find(".tree-icon").removeClass("tree-folder-open");
 7                     if($(this).children("div.tree-node").find(".tree-title").text()==node.text){
 8                         $(this).children("ul").show();
 9                         $(this).children("ul").css({'position':'absolute','top':'20px','left':'60px','width':'300px','height':'650px','overflow-y':'auto'})
10                         $(this).children("div.tree-node").find(".tree-hit").addClass("tree-expanded").removeClass("tree-collapsed");
11                         $(this).children("div.tree-node").find(".tree-icon").addClass("tree-folder-open");
12                     }
13                 }
14             });
15 }