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


相关推荐

  • pycharm激活码2021年【注册码】

    pycharm激活码2021年【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    50
  • idea 2021.9最新激活码 mac[最新免费获取]

    (idea 2021.9最新激活码 mac)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1STL…

    2022年3月27日
    64
  • 对于Redis中设置了过期时间的Key,你需要知道这些内容「建议收藏」

    对于Redis中设置了过期时间的Key,你需要知道这些内容

    2022年2月14日
    35
  • ListView中实现部分刷新的两种方法

    ListView中实现部分刷新的两种方法ListView在开发中用到的地方非常多,我们经常是全部刷新来更新数据,如果只需要更新某一条数据,该怎么实现呢?我在项目中使用过以下两种方法:1.通过点击的位置,获取需要刷新那一列对应的控件,然后在控

    2022年7月2日
    27
  • simhash的应用范围_Simplorer

    simhash的应用范围_Simplorer目录0x01海量数据文本相似度解决方式SimHash+分词方法+基于内容推荐算法0x02海量simhash查询(1)抽屉原理(2)建立索引(3)判重(4)优化效果(5)权衡时间、空间(6)存储选型0x03比较相似度0x01海量数据文本相似度解决方式SimHash+分词方法+基于内容推荐算法原文链接:海量数据文本相似度解决方式SimHash+…

    2022年10月1日
    0
  • kali linux2020中文乱码及主题切换

    kali linux2020中文乱码及主题切换2019年11月26日,kaliLinux官网发布了KaliLinux2019.4发行版,此版本做了很大的改动,界面焕然一新。2019.4涉及到的一些新更新内容包括:新的默认桌面环境Xfce新的GTK3主题(适用于Gnome和Xfce)引入“KaliUndercover”模式KaliDocumentation有一个新家,现在由Git驱动公共包装–将您的工具带入KaliK…

    2022年7月27日
    10

发表回复

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

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