Jquery ztree树插件
<%@ 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>
//使用标准json展示数据：[{id:1,name:'节点一',children:[{id:1,name:'节点二'},]},{}]
<ul id="myZtree" class="ztree"></ul> <script type="text/javascript">
//配置ztree属性
var setting1 = {};//使用默认值
//配置ztree数据
var nodes1 = [{id:1,name:"一级菜单1",children:[{id:101,name:"二级菜单1",children:[{id:301,name:"三级菜单"}]},{id:102,name:"二级菜单2"}]},{id:2,name:"一级菜单2"}];
//调用ztree初始化方法，给myZtree展示数据
$.fn.zTree.init($("#myZtree"), setting1, nodes1);
</script> //使用简单json展示数据：[{id:1,name:'节点一'},{id:101,name:'节点2',pId:1},{}]
<ul id="myZtree1" class="ztree"></ul> <script type="text/javascript">
//配置ztree属性
var setting2 = {
data: {
simpleData: {
enable: true, //开启简单数据模式
idKey: "id", //数据标识
pIdKey: "pId", //父节点标识
rootPId: 0 //顶级节点
}
} };//使用默认值 开启简单数据格式模式
//配置ztree数据
var nodes2 = [{id:1,name:"一级菜单1",pId:2},{id:2,name:"二级菜单2",pId:3},{id:3,name:"三级菜单2",pId:0}];
//调用ztree初始化方法，给myZtree展示数据
$.fn.zTree.init($("#myZtree1"), setting2, nodes2);
</script>
</body>
</html>
Jquery ztree树插件的更多相关文章
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- Jquery ztree树插件2
<%@ 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 ...
随机推荐
- 微信小程序开发者注册流程
一,首先打开浏览器,搜索微信公众平台 点击进入,此时还没有注册微信小程序开发账号,我们需要点击注册 进入注册页面,会出现四种账号,我们选择小程序账号 然后根据提示就可以进行注册了 注册时,需填写一下个 ...
- spring注解@service("service")括号中的service有什么用
相当于 xml配置中得 bean id = service 也可以不指定 不指定相当于 bean id = com. service.service 就是这个类的全限定名 好处是:同一个接口可以有多个 ...
- shiro整合oauth
一.基本思路脑图 二.客户端shiro配置 shiro配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...
- requirejs 加载其它js
基本代码: require.config({ // baseUrl : '/js/' paths: { jquery: '/js/jquery-1.11.3.min', validate: '/js/ ...
- POJ 2289 Jamie's Contact Groups / UVA 1345 Jamie's Contact Groups / ZOJ 2399 Jamie's Contact Groups / HDU 1699 Jamie's Contact Groups / SCU 1996 Jamie's Contact Groups (二分，二分图匹配)
POJ 2289 Jamie's Contact Groups / UVA 1345 Jamie's Contact Groups / ZOJ 2399 Jamie's Contact Groups ...
- AppDomain 及BuildManager
一.AppDomain.CurrentDomain.DynamicDirectory 只有在Web项目中在值,动态执行目录像下面这样 Framework\v4.0.30319\Temporary AS ...
- git bash上传代码到github
今天,老爷机notebook开始卡了,我决定格盘重装系统. 顺便复习一下git本地命令的使用 1,配置 2先跳过一般的操作.介绍链接github远程库的操作 我的两个钥匙在C:\Users\bond\ ...
- Nodejs cluster模块深入探究
由表及里 HTTP服务器用于响应来自客户端的请求,当客户端请求数逐渐增大时服务端的处理机制有多种,如tomcat的多线程.nginx的事件循环等.而对于node而言,由于其也采用事件循环和异步I/O机 ...
- OCP 11G 实验环境安装文档 ( RedHat5.5 + Oracle11g )
RedHat5.5 linux下Oracle11g软件安装 一.配置虚拟机 为了创建和配置虚拟机,你需要添加硬件设备如磁盘和cpu,在你开始安装之前,创建一个windows目录作为存放虚拟机的目录 目 ...
- 导出EXCEL遇到问题
EXCEL设置的格式要与写入信息的格式要匹配,比如写入信息是字符串类型,而EXCEL单元格是DATE类型则会出错.