easyui02(tree前端工作)

昂761

于 2022-05-06 11:12:24 发布

阅读量88

点赞数

文章标签：前端 easyui javascript

本文链接：https://blog.csdn.net/weixin_65088316/article/details/124605869

版权

1Easyui-tree就是一个树形菜单.

2.它的作用是:获取数据库表中的数据,以树形结构的形式展示出来.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//alert(ctx);
$(function(){
   //加载数的数据
   $('#myTree').tree({
       url:ctx+'/data/tree_data1.json',//请求地址
       animate:true,//展开或者收缩节点显示动画效果
       onDblClick: function(node){//节点
           //alert(node.text+" "+node.id);//在用户双击点击的时候提示
           //判断是否为子节点
           var nodes=$('#myTree').tree('getChildren',node.target);
           //alert(nodes.length);
           if(nodes.length==0){//没有子节点
               //判断选项卡是否存在
               var f=$('#myTab').tabs('exists',node.text);
           if(!f){
               $('#myTab').tabs('add',{
                   title:node.text,
                   content:node.text ,
                   closable:true,
                   iconCls:node.iconCls//图表
               });
           }
           else{//存在让其对应选中
               $('#myTab').tabs('select',node.text);
           }
       }

   }

   });
})
</script>
</head>
<body>
<div class="easyui-layout" style="width:700px;height:350px;">
       <div data-options="region:'north' ,split:true", style="height:85px;text-align:center;">
       <h2>后台书籍管理系统</h2>
       </div>
       <div data-options="region:'south',split:true" title="沉上工作室" style="height:68px;text-align:center;">
       ©沉上工作室版权所有,维权必究
       </div>
       <div data-options="region:'west',split:true" title="功能导航" style="width:100px;">
       <ul id="myTree" class="easyui-tree">


       </ul>

       </div>
       <div data-options="region:'center'"   style="padding: 5px;background: #fff;">

   <div id="myTab" class="easyui-tabs" style="width:100%;height:100%">
       <div data-options="iconCls:'icon-bricks' " title="首页" style="padding:10px">
           <img src="img/lb1.png" style="width:100%;height:100%;"/>
       </div>
   </div>

</body>
</html>

3.前提是公共的界面必须引入css和js,

当然还可以引入代码防止运行的时候卡顿

昂761

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui02(tree前端工作)

1Easyui-tree就是一个树形菜单.2.它的作用是:获取数据库表中的数据,以树形结构的形式展示出来.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  <%@ include file="common/head.jsp" %> <!DOCTYPE html>&lt...
复制链接

扫一扫