Jquery ztree树插件2
<%@ 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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script> </head>
<body class="easyui-layout">
<!-- data-options如果html元素是easyui组件，可以用data-options设置属性 -->
<div region="north" style="height: 100px" title="xxx系统">北部区域</div>
<div data-options="region:'west'" style="width: 150px" title="系统菜单">
<!-- 展示折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<div title="基本功能">
<a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-save'">点击</a>
<script type="text/javascript">
$("#btn").click(function(){
//判断
var r = $("#myTabs").tabs('exists','测试面板');
if(r){
//选中
$("#myTabs").tabs('select','测试面板');
}else{
//调用tabs组件方法。中部区域中tabs选项卡 添加新面板
$("#myTabs").tabs('add',{
title:'测试面板',
iconCls:'icon-add',
closable:true,
content:'<iframe src="../pages/base/area.jsp" frameborder="0" width="100%" height="100%"></iframe>'
});
}
})
</script>
</div>
<div title="系统管理">
<ul id="menu" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//配置信息
var setting2 = {
data: {
simpleData: {
enable: true, //开启简单数据模式
idKey: "id", //数据标识
pIdKey: "pId", //父节点标识
rootPId: 0 //顶级节点
}
},
callback: {
onClick: function(event, treeId, treeNode){ //单击事件
//判断节点是否可以点击
// alert(treeNode.page);
if(treeNode.page != undefined){
//treeNode,单击某一节点数据：json对象
//{ "id":"111", "pId":"11", "name":"基础档案设置", "page":"pages/base/archives.jsp"},
// alert(treeNode);
// console.info(treeNode);//在浏览器控制台输出
//判断
var r = $("#myTabs").tabs('exists',treeNode.name);
if(r){
//选中
$("#myTabs").tabs('select',treeNode.name);
}else{
//调用tabs组件方法。中部区域中tabs选项卡 添加新面板
$("#myTabs").tabs('add',{
title:treeNode.name,
iconCls:'icon-add',
closable:true,
content:'<iframe src="../'+treeNode.page+'" frameborder="0" width="100%" height="100%"></iframe>'
});
}
}
}
} };
//数据从json文件中
$.post("../data/menu.json",{},function(data){
$.fn.zTree.init($("#menu"), setting2, data);
});
})
</script>
</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 展示选项卡面板 -->
<div id="myTabs" class="easyui-tabs" data-options="fit:true">
<div title="基本功能"></div>
</div>
</div>
<!-- <div data-options="region:'east'" style="width: 150px">东部区域</div> -->
<div data-options="region:'south'" style="height: 50px">南部区域</div>
</body>
</html>
Jquery ztree树插件2的更多相关文章
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- Jquery ztree树插件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- easyui&8Jquery ztree树插件
7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- 树结构数据的展示和编辑-zTree树插件的简单使用
最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...
- 在vue中使用ztree树插件
插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在li ...
- 项目一:第一天 1、项目概述 2、环境搭建（重点） 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用
1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf' ...
- Jquery的树插件jqxTreeGrid的使用小结
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
- Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
随机推荐
- Mongodb 参数说明及常见错误处理
在 CentOS7 上安装 MongoDB 1 通过 SecureCRT 连接至 CentOS7 服务器: 2 进入到 /usr/local/ 目录:cd /usr/local 3 在当前目录下 ...
- Spring MVC 项目搭建 -6- spring security 使用自定义Filter实现验证扩展资源验证，使用数据库进行配置
Spring MVC 项目搭建 -6- spring security使用自定义Filter实现验证扩展url验证,使用数据库进行配置 实现的主要流程 1.创建一个Filter 继承 Abstract ...
- 新技能get√10个PS加速小技巧让你的PS不再卡
如果你在处理较大尺寸的图片.使用像HDR.图像合成或者3D和视频等类似的功能,优化Photoshop的性能是非常关键的.这篇文章中,我会为大家介绍几种提高Photoshop性能的建议,使其在你的电脑上 ...
- 定制Android开发者专属T恤
之前在T社上买了一件定制的T恤,感觉质量挺不错的,那是段子张发起的众筹.正面有hello google这几个字母. 我自己本身是一个Android粉,从nexus手机到pixel手机,坚持买原生的操作 ...
- 精通 JS正则表达式（转）
转载的目的在于:增加一些自己看不懂的解释.内容只加不改,灰色字体是自己寻找并增加的. 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...
- bash远程代码执行漏洞
博客园新闻:http://news.cnblogs.com/n/504506/(如果以下有说错的地方请不吝指出,谢谢~) 详情可围观上面的链接.因为我们的服务器都是私有网环境,即使要修复也得等到下次安 ...
- vijos1046题解
题目: 学校里面有N个景点.两个景点之间可能直接有道路相连,用Dist[I,J]表示它的长度:否则它们之间没有直接的道路相连.这里所说的道路是没有规定方向的,也就是说,如果从I到J有直接的道路,那么从 ...
- Frameset框架集的应用
Frameset框架集常用于写网站后台页面,大多数"T字型"布局后台页面,就是应用Frameset框架集来做的.Franeset框架集的优点是,他可以在同浏览器窗口显示不同页面内容 ...
- box-shadow阴影详解
每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看. 使用语法: element{box-shadow: inset x-offset y-offset blur ...
- PHPOffice/PHPExcel生成省市区三级联动的excel表格
最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...