javascript入门 之 zTree (一)
1.安装:
我用的bower工具,所以执行:
bower install ztree
2.详细功能与配制,请考官方文档:
http://www.treejs.cn/v3/main.php#_zTreeInfo
3.代码:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>zTree测试</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"系统管理", open:true, children:[
{name:"增加"}, {name:"删除"}]},
{name:"用户管理", open:true, children:[
{name:"激活"}, {name:"修改"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#first"), setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="first" class="ztree"></ul>
</div>
</BODY>
</HTML>
4.效果:
javascript入门 之 zTree (一)的更多相关文章
- javascript入门 之 zTree(十四 增删查改)(二)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
- javascript入门 之 zTree(十四 增删查改)(一)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
- javascript入门 之 zTree(十三 移动/复制事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
- javascript入门 之 zTree(十二 托拽事件(二))
1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...
- javascript入门 之 zTree(十一 托拽事件(一))
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
- javascript入门 之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
- javascript入门 之 ztree (九 单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- javascript入门 之 ztree (八 一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- javascript入门 之 ztree(七 结点的查询)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- javascript入门 之 ztree (六 结点的点击和展开/折叠事件)
1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...
随机推荐
- element中的树形组件,如何获取父级菜单的id
一般多选的树形组件,使用getCheckedNodes()方法只能获取到本级的菜单id,只有在子菜单全部选中的情况下才会选中上级.但我们想要不全选中子级的情况下也要获取它的上级,甚至上上级等,怎么办呢 ...
- pyppepeer淘宝登录
代码: import time import random import asyncio import pyppeteer class LoginTaoBao: """ ...
- 原生JavaScript下的Ajax
概述 AJAX即asynchronous javascript and XML,中文翻译是异步的javascript和XML.是指一种创建交互式网页应用.用于创建快速动态网页的开发技术. 传统的网页( ...
- 用 SendGrid 发送免费电子邮件
1. 概述 SendGrid 免费账号可以限额发送 100/天封邮件,虽然比 Mailgun 的每月 10000 封的免费额度少,但胜成注册无需绑定信息卡. 集成 SendGrid 有 SMTP 和 ...
- Python - 函数形参之必填参数、缺省参数、可变参数、关键字参数的详细使用
Python函数形参 必传参数:平时最常用的,必传确定数量的参数 缺省参数:在调用函数时可以传也可以不传,如果不传将使用默认值 可变参数:可变长度参数 关键字参数:长度可变,但是需要以kv对形式传参 ...
- 通过shell脚本排查jar包中类冲突
当我们在线上运行项目时,依赖很多jar包,有时候某个类的全限定名,在多个包中出现,而某个包中的类的方法没有,而且在类加载时,刚好加载了这个类,可能会报找不到方法,或者找不到类的异常,这种情况就可能是类 ...
- 【JAVA进阶架构师指南】之二:JVM篇
前言 谈到JAVA,就不得不提JVM---JAVA程序员绕不开的话题.也许有童鞋会说,我不懂JVM,但是我一样可以写出JAVA代码,我相信说这种话的童鞋,往往是只有1-3年的初级开发人员,对JAV ...
- 【简说Python WEB】视图函数操作数据库
目录 [简说Python WEB]视图函数操作数据库 系统环境:Ubuntu 18.04.1 LTS Python使用的是虚拟环境:virutalenv Python的版本:Python 3.6.9 ...
- 「建议心心」要就来15道多线程面试题一次爽到底(1.1w字用心整理)
. 本文是给**「建议收藏」200MB大厂面试文档,整理总结2020年最强面试题库「CoreJava篇」**写的答案,所有相关文章已经收录在码云仓库:https://gitee.com/bingqil ...
- 使用tomcat运行时提示some characters cannot be mapped using iso-8859-1 character encoding异常
今天第一次使用java进行jsp项目搭建,也是第一次使用tomcat.tomcat是运行java web的一个小型服务器,属于Apache的一个开源免费的服务. 在运行web 的时候,我们就要先配置好 ...