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>

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 支付宝功能结构图_阿里双十一晚会

    支付宝功能结构图_阿里双十一晚会转自:https://blog.csdn.net/itfly8/article/details/111027014简介:汤波(甘盘),男,1989/02/21,硕士学历。高中开始编程,热爱技术,深信技术让世界更美好。对前沿技术一直保持饥饿感,热衷于创新和革新,让系统体制更为高效和人性化,也深知一个人强走的快,一个团体强才能走的远。在技术团队建设(团队招聘和组建、梯队梯度建设)、技术栈管理(包含技术选型、技术规范建设、软件体系规划)和项目研发管理(软件工程管理、开发效能和质量管理)方面有着较为丰富的实..

    2022年10月19日
  • 全景视频拼接关键技术

    全景视频拼接关键技术一、原理介绍图像拼接(ImageStitching)是一种利用实景图像组成全景空间的技术,它将多幅图像拼接成一幅大尺度图像或360度全景图,图像拼接技术涉及到计算机视觉、计算机图形学、数字图像处理以及一些数学工具等技术。图像拼接其基本步骤主要包括以下几个方面:摄相机的标定、传感器图像畸变校正、图像的投影变换、匹配点选取、全景图像拼接(融合),以及亮度与颜色的均衡处理等

  • 培根密码加解密_二进制密码在线解密

    培根密码加解密_二进制密码在线解密0x00介绍培根密码实际上就是一种替换密码,根据所给表一一对应转换即可加密解密它的特殊之处在于:可以通过不明显的特征来隐藏密码信息,比如大小写、正斜体等,只要两个不同的属性,密码即可隐藏0x01代码实现脚本很简单,就是建立对应关系,对密文,或者明文进行相应的替换即可需要注意的是输入的都应该是全小写字母或全大写字母,在脚本里也有说明python脚本如下:#…

    2022年10月25日
  • 使用vagrant一键部署本地php开发环境(一)[通俗易懂]

    使用vagrant一键部署本地php开发环境(一)

  • linux 如何做共享磁盘阵列,在Linux上玩转磁盘阵列分享「建议收藏」

    linux 如何做共享磁盘阵列,在Linux上玩转磁盘阵列分享「建议收藏」大部分用户都会担心,万一硬盘发生故障,一、使用磁盘阵列可以带来哪些好处?在具体如何配置磁盘阵列之前,笔者要先给大家介绍一下利用磁盘阵列的好处。先给大家一点动力,让大家能够继续看下面的内容。第一个好处是磁盘阵列可以提高数据存取的效率。硬盘其实就好像是一个盒子,其内部空间很大,但是出入的口子很小。当要把大量数据保存在这个盒子的时候,只有通过这个小小的盒子来保存数据。其存取的效率明显不是很高。但是,如果…

  • 河北对口计算机录取分数线_河北对口计算机专科院校名单

    河北对口计算机录取分数线_河北对口计算机专科院校名单技校网专门为您推荐的类似问题答案问题1:2009年河北对口计算机高考分数线360问题2:谁能告诉我湖南职高计算机专业对口升学本科和专科分数线湖南省2010年普通高校职高对口招生录取控制分数线代码专业门类本科专科71师范44820072种植54473养殖52374机电56675电子电工50676计算机55877建筑48278旅游48981…

发表回复

您的电子邮箱地址不会被公开。

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