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


相关推荐

  • vim常用设置—(.vimrc详细配置)[通俗易懂]

    vim常用设置—(.vimrc详细配置)[通俗易懂].vimrc配置文件内容如下:""""""""""""""""""""""""""""""""""""""""&

    2022年5月5日
    41
  • 国内能用的国际邮箱推荐哪个?公司邮箱号码大全「建议收藏」

    国内能用的国际邮箱推荐哪个?公司邮箱号码大全「建议收藏」在网上看到大家一直在讨论国际邮箱哪个好用,TOM、163、gmail等,在国内用哪个邮箱呢?外贸公司需要跟客户沟通合同信息、物流货代公司需实时沟通货柜清关进展、电商公司采购出口需跟国外办事处或客户沟通、软件信息公司老板是老外,也必须用国际邮箱,这些使用邮箱的人90%都会在国内用邮箱,所以在国内能的国际邮箱是刚需。国内能用的国际邮箱推荐常用个人邮箱,但进了公司用企业邮箱才发现真的不一样。TOM企业邮箱是我在大学里看到老师用过的,现在公司分配了一个给我,之前的个人邮箱Facebook验证码都收不到,公司的这

    2022年9月24日
    2
  • Java二叉树前序遍历[通俗易懂]

    Java二叉树前序遍历[通俗易懂]给你二叉树的根节点root,返回它节点值的前序遍历。示例1:输入:root=[1,null,2,3]输出:[1,2,3]示例2:输入:root=[]输出:[]示例3:输入:root=[1]输出:[1]示例4:输入:root=[1,2]输出:[1,2]示例5:输入:root=[1,null,2]输出:[1,2]提示:树中节点数目在范围[0,100]内-100<=Node.val<=100进阶:递归算法很简单

    2025年9月23日
    3
  • 操作系统银行家算法C语言代码实现

    操作系统银行家算法C语言代码实现    计算机操作系统课设需要,写了两个下午的银行家算法(陷在bug里出不来耽误了很多时间),参考计算机操作系统(汤子瀛)    实现过程中不涉及难度较大的算法,仅根据银行家算法的思想和步骤进行实现。以下为详细步骤:   定义:max1[][]:最大需求矩阵,max1[i][j]为第i条进程的第j项资源的最大需求数目;   allo…

    2022年5月4日
    26
  • Java中Scanner的理解大总结「建议收藏」

    Java中Scanner的理解大总结「建议收藏」Scanner类常用的方法:Scnaner(Filefile);Scnaner(Stringfilename);创建一个从特定文件扫描的扫描器hasNext();还有可读取的书库返回truenext();返回下一个标志作为字符串nextLine();使用行分隔符从这个扫描器返回一个行结束nextByte();nextshort();nextInt();nextLong()

    2022年7月20日
    18
  • 矩阵范数小结_f范数

    矩阵范数小结_f范数稍微总结一下矩阵范数的求解来放松一下身心吧~这里总结的矩阵范数主要是F范数、1范数、2范数、核范数以及全变分TV范数与1、2的搭配

    2025年11月25日
    2

发表回复

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

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