tree前端实现
2021/9/11 23:04:46
本文主要是介绍tree前端实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目标
1、首先要在js文件专门建一个写js代码的file文件(index.js)
$(function(){ $('#stuMenu').tree({ url:'tree_data1.json' , onClick: function(node){ // alert(node.text); // 在用户点击的时候提示 var exists = $('#stuTabs').tabs('exists',node.text); if(exists){ $('#stuTabs').tabs('select',node.text); }else{ $('#stuTabs').tabs('add',{ title:node.text, content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>', closable:true, }); } } }); })
将我们需要的tree-data1-json文件导入到web—content中
[{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":"Wife" },{ "id":113, "text":"Company" }] },{ "id":12, "text":"Program Files", "children":[{ "id":121, "text":"Intel", "attributes":{ "url":"demo1.jsp", "p2":"Custom Attribute2" } },{ "id":122, "text":"Java", "attributes":{ "url":"demo2.jsp", "p2":"Custom Attribute2" } },{ "id":123, "text":"Microsoft Office" },{ "id":124, "text":"Games", "checked":true }] },{ "id":13, "text":"index.html" },{ "id":14, "text":"about.html" },{ "id":15, "text":"welcome.html" }] }]
index.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>书籍后管主界面</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/black/easyui.css""> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'版权信息',split:true" style="height:100px;"></div> <!-- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> --> <div data-options="region:'west',title:'菜单管理',split:true" style="width:200px;"> <ui id="stuMenu"></ui> </div> <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"> <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;"> </div> </div> </body> </html>
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。
<div class="easyui-panel" style="padding:5px"> <ul class="easyui-tree"> <li> <span>My Documents</span> <ul> <li data-options="state:'closed'"> <span>Photos</span> <ul> <li> <span>Friend</span> </li> <li> <span>Wife</span> </li> <li> <span>Company</span> </li> </ul> </li> <li> <span>Program Files</span> <ul> <li>Intel</li> <li>Java</li> <li>Microsoft Office</li> <li>Games</li> </ul> </li> <li>index.html</li> <li>about.html</li> <li>welcome.html</li> </ul> </li> </ul> </div>
,我们将树控件定义在一个空<ul>元素中并使用Javascript加载数据。
即使用下面一行代码代替上面的一段代码
<ul id="tt"></ul>
这篇关于tree前端实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南