easyUI之tree前端实现

• 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’,

  handler:function(){

  alert(‘refresh’);

  }

  }]

  });

  2.不能打开重复的Tab

  ---

  拿到目前所有打开的Tab选项卡，与将要打开的选项卡做对比exists

  存在true：不打开

  不存在false：打开

  var exists=$(‘#stuTabs’).tabs(‘exists’,node.text);

  3.对于已经存在的Tab选项，被点击时应默认被选中

  ---

  $(‘#stuTabs’).tabs(‘select’,node.text);

  ---

  添加select方法，后面的参数为标题

  4.点击菜单，能够访问对应的页面，而非文字内容

  ---

  content:‘’,

  最后看看index.jsp的完整代码

  $(function(){

  $(‘#stuMenu’).tree({

  url:‘tree_data1.json’ ,

  onClick:function(node){

  //            判断当前选项卡是否存在

  var exists=$(‘#stuTabs’).tabs(‘exists’,node.text);

  if(exists){

  $(‘#stuTabs’).tabs(‘select’,node.text);

  }else{

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

  title:node.text,

  content:‘’,

  closable:true,