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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • yum 安装nginx_yum安装nginx

    yum 安装nginx_yum安装nginx前言:日常外出工作系统都是最小化安装,导致很多包都无法下载,需要自己手动安装包yum源以centos7.5为例在官网下载CentOS-7-x86_64-Everything-1804.iso上传到对应的服务器将镜像源挂载到对应的目录mount-oloop/opt/CentOS-7-x86_64-Everything-1804.iso/opt/yumrepo/tips:目录可以自定义修改路径/etc/yum.repos.dvirhel79.repo[rhel79]na

    2022年8月12日
    4
  • sizeof和strlen的区别及使用详解

    sizeof和strlen的区别及使用详解首先我们来看一下sizeof和strlen的区别:sizeof操作符的结果类型为size_t(Thesizeofkeywordgivestheamountofstorage,inbytes,associatedwithavariableoratype(includingaggregatetypes).Thiskeywordreturnsaval…

    2025年7月26日
    0
  • CAS原理详解_外燃机工作原理

    CAS原理详解_外燃机工作原理CAS简介CAS的意思是compareandswap,比较并交换。CAS的引入是为了解决java锁机制带来的性能问题。锁机制存在以下问题:(1)在多线程竞争下,加锁、释放锁会导致比较多的上下文切换和调度延时,引起性能问题。(2)一个线程持有锁会导致其它所有需要此锁的线程挂起。(3)如果一个优先级高的线程等待一个优先级低的线程释放锁会导致优先级倒置,引起性能风险。解决线程安全问题volatile是不错的机制,但是volatile不能保证原子性。因此对于同步最终还是要回到锁机制上来。独占锁

    2022年10月16日
    0
  • 基于图同构网络(GIN)的图表征网络的实现

    基于图同构网络(GIN)的图表征网络的实现基于图同构网络的图表征学习主要包含以下两个过程:首先计算得到节点表征;其次对图上各个节点的表征做图池化(GraphPooling),或称为图读出(GraphReadout),得到图的表征(GraphRepresentation)。在这里,我们将采用自顶向下的方式,来学习基于图同构模型(GIN)的图表征学习方法。我们首先关注如何基于节点表征计算得到图的表征,而忽略计算结点表征的方法。基于图同构网络的图表征模块(GINGraphReprModu

    2022年4月8日
    57
  • mysql前缀索引及其选择「建议收藏」

    mysql前缀索引及其选择「建议收藏」有时候需要索引很长的字符列,比如BLOB、TEXT或者很长的VARCHAR类型的列,通常可以索引开始的部分字符,这样可以大大节约索引空间,从而提高索引效率。

    2022年5月23日
    35
  • Linux shell if [ -n ] 正确使用方法「建议收藏」

    Linux shell if [ -n ] 正确使用方法「建议收藏」if[str1=str2]      当两个串有相同内容、长度时为真 if[str1!=str2]     当串str1和str2不等时为真 if[-nstr1]      当串的长度大于0时为真(串非空) if[-zstr1]       当串的长度为0时为真(空串) if[str1]        当串str1为非空时为真

    2022年7月27日
    1

发表回复

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

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