easyUI之tree前端实现

• Photos

• Friend

• Wife

• Company

• Program Files
• Intel
• Java
• Microsoft Office
• Games
• index.html
• about.html
• welcome.html

• 运行结果如下

  缺陷：1.样式缺陷

  2.不好做数据的渲染，树形结构的动态显示(重点)

  

  为了改善以上缺陷，我们将树控件定义在一个空

  • 元素中并使用Javascript加载数据。

  即使用下面一行代码代替上面的一段代码

  <ul id=“tt”>

  但是这只是一个空壳子，为了关联数据，我们还需要将tree目录下的文件复制粘贴到WebContent目录下，并与之将**<ul** id=“tt”> 关联起来

  

  为了将js代码与HTML代码分离，我们需要在js目录下建立index.js文件

  先写一个测试的方法，看是否能访问到js文件

  $(function(){

  alert(123);

  })

  同时需要在index.jsp界面引入js

  src=“${pageContext.request.contextPath }/static/js/index.js”>

  运行结果如下，说明能访问到js文件

  

  因为现在的ul标签里还没有li标签，因此还不会有值传入，于是我们需要在js方法中加入如下代码

  $(function(){

  $(‘#tt’).tree({

  url:‘tree_data1.json’

  });

  })

  注意：url要与复制的josn文件一致，$()要与界面的id一致

  运行如下

  

  上面操作能代替之前的一大段HTML代码的原因：

  1.tree方法是通过$.extends()拓展出来的

  2.tree方法相当于$(‘#tt’).append("

  • File21
  • ");，即追加了很多li标签

  二，tabs控件的使用

  ===========

  1.点击左侧显示右侧Tab

  ---

  ①给菜单添加点击事件

  $('#tt').tree({

  onClick: function(node){

    alert(node.text);  // 在用户点击的时候提示
  

  }

  });

  ②调用Tabs选项卡打开对应的页面

  新建两个jsp界面

  修改tree_data1.json文件如下

  

  选项卡打开

  通过标签创建选项卡，将如下代码复制粘贴在内容的div中，记得将width和height设置为100%

  <div id=“tt” class=“easyui-tabs” style=“width:100%;height:100%;”>  

  选项卡对应的页面展示

  修改：

   

  以及

  $(‘#stuMenu’).tree({

  注意：url要与复制的josn文件一致，$()要与界面的id一致

  添加一个新的选项卡面板，方法如下

  // add a new tab panel

  $(‘#tt’).tabs(‘add’,{

  title:‘New Tab’,

  content:‘Tab Body’,

  closable:true,

  tools:[{

  iconCls:‘icon-mini-refresh’,

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  点击这里领取Web前端开发经典面试题

  转存中…(img-i15YtQdE-1713481704767)]

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  点击这里领取Web前端开发经典面试题