jquery——zTree, 完美好用的树插件

jquery——zTree, 完美好用的树插件

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

Demo

这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的。

__________________________________________________________________________________

以下是简单的使用demo:

<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO - Standard Data </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
    <script type="text/javascript">
		var setting = {
		    view: {
		        selectedMulti: false        //禁止多点选中
	        },
		    data: {
			    simpleData: {
				    enable:true,
				    idKey: "id",
				    pIdKey: "pId",
				    rootPId: ""
			    }
		    },
		    callback: {
			    onClick: function(treeId, treeNode) {
				    var treeObj = $.fn.zTree.getZTreeObj(treeNode);
                    var selectedNode = treeObj.getSelectedNodes()[0];
                    $("#txtId").val(selectedNode.id);
                    $("#txtAddress").val(selectedNode.name);
			    }
		    }
		};
		var zNodes =[
			{id:1, pId:0, name:"广东", open:true},
		    {id:101, pId:1, name:"广州", file:"core/standardData"},
		    {id:102, pId:1, name:"深圳", file:"core/simpleData"},
		    {id:103, pId:1, name:"东莞", file:"core/noline"}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	</script>
</head>
<body>
    <div style="float:left;" >
        <ul id="treeDemo" class="ztree">
        </ul>
    </div>
    <div style="float:left;" >
        id: <input id="txtId" type="text" value="" /><br />
        地名:<input id="txtAddress" type="text" value="" />
    </div>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/118814.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • BeanUtils中copyProperties的使用[通俗易懂]

    BeanUtils中copyProperties的使用[通俗易懂]BeanUtils中copyProperties的作用是将一个对象中的属性值赋值(拷贝)给另一个对象中对应的属性。其中赋值成功的属性对应的属性名和属性类型必须相同,否则对应的属性值不会从一个对象赋值给另一个对象,但是此时不影响其他属性值的拷贝。1、实体类publicclassModel01{privateStringname;privateintage;

    2022年10月3日
    3
  • Mac激活idea【2021免费激活】

    (Mac激活idea)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月29日
    313
  • Linux开机启动nginx「建议收藏」

    Linux开机启动nginx「建议收藏」在/etc/init.d下创建文件nginxvim/etc/init.d/nginxnginx官方脚本修改配置nginx=”/usr/local/nginx/sbin/nginx”#修改成nginx执行程序的路径NGINX_CONF_FILE=”/usr/local/nginx/conf/nginx.conf”#修改成nginx.conf文件的路径设置文件的执行权限chmoda+x/etc/init.d/nginx可以通过下面指令控制启动停止/etc/init..

    2022年10月6日
    3
  • java线程池 面试题(精简)

    java线程池 面试题(精简)什么是线程池?线程池是一种多线程处理形式,处理过程中将任务提交到线程池,任务的执行交由线程池来管理。如果每个请求都创建一个线程去处理,那么服务器的资源很快就会被耗尽,使用线程池可以减少创建和销毁线程的次数,每个工作线程都可以被重复利用,可执行多个任务。 为什么要使用线程池?创建线程和销毁线程的花销是比较大的,这些时间有可能比处理业务的时间还要长。这样频繁的创建线程和销毁线程,再…

    2022年6月13日
    40
  • 基于特征的图像拼接算法_图像拼接算法原理

    基于特征的图像拼接算法_图像拼接算法原理目录APAP算法思路几个问题SVD在最小二乘中的应用DLT求单应性矩阵HMovingDLT求局部单应性矩阵实现的小细节文献图像拼接首先通过一些手段(标定、SIFT等特征点、其他传感器等)获取图像间的对应关系(2D-2D)。这个对应关系可以用单应性矩阵HHH(也称透视变换)描述[x′y′w′]=[h00h01h02h10h11h12h20h21h22][xyw]=H[xyw](1)\begin{aligned}\left[\begin{matrix}x’\\y’\\w’\end{matrix}\ri

    2022年9月22日
    2
  • win10双系统重装ubuntu_双系统win10无法启动

    win10双系统重装ubuntu_双系统win10无法启动&amp;amp;amp;amp;NBSP;&amp;amp;amp;amp;NBSP;&amp;amp;amp;amp;NBSP;&amp;amp;amp;amp;NBSP;这两天笔者安装win10+ubuntu16.04双系统,因为网络上能找到大量的资料,安装过程此处就不多讲。因为笔者电脑是华硕主板,bios默认设置为安全启动,笔者猜测会阻止加载ubuntu引导,导致双系统不能随意引导。先不管那么多,现在的问题是Ubuntu已经安装成功,开机直接进入win10,所以笔者的

    2022年10月21日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号