easyUI之tree前端实现(1)

• 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

  最后：

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

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

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

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

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】