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)


相关推荐

  • android中UI设计心得

    android中UI设计心得UI布局的设计,布局方式有相对布局(RelativeLayout)线性布局(LinearLayout),表格布局(TableLayout),网格布局(GridLayout),帧布局(FrameLayout),绝对布局(AbsoluteLayout);下面这个界面的布局格式,是通过相对布局实现的,每一行是一个整体,整体里面也是也是通过相对布局实现的;编写项目时,我们需要在res中创建文件夹一定要

  • inputstreamreader和inputstream_FileInputStream

    inputstreamreader和inputstream_FileInputStreamInputStreamReader类:java.io.InputStreamReaderextendsReaderInputStreamReader:是字节流通向字符流的桥梁:他使用指定的charset读取字节并将其解码为字符。(解码:把看不懂的变为能看懂的)继承自父类的共性成员方法:intread()读取单个字符并返回intread(char[]cbuf)一次读取多个字符,经字符读入数组中voidclose()关闭该流并释放与之关联的所有资源构造方

  • 三星Samsung 4.4.2该负责人制度,简化名单「建议收藏」

    三星Samsung 4.4.2该负责人制度,简化名单

  • python通用激活码(最新序列号破解)

    python通用激活码(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Uml用例图总结

    Uml用例图总结

  • 叙事传输的说服机制_简述传输层实现可靠传输措施

    叙事传输的说服机制_简述传输层实现可靠传输措施博文《PUSCH上行跳频(1)-Type1频率跳频》里提到了为什么要使用PUSCH跳频,以及详细介绍了Type1方式的跳频,本文继续这个话题,介绍Type2方式的跳频。1.采用PUSCH跳频时需要注意的问题在上行子帧中,PUCCH信道处于带宽的高低两侧,或者说位于频带的边缘,PUSCH信道则位于带宽的中间。PUCCH信道也以RB对为基本单位,每个RB在频域上是12个子载波,时域上是1个时隙。需要注意PUCCH信道每个RB对的两个RB位置:第一个时隙的PUCCH信道位于带宽的低频位置,第二个时隙的

发表回复

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

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