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

相关推荐

  • qlineedit设置光标_光标选不中

    qlineedit设置光标_光标选不中QLineEdit的光标当失去焦点后仍然显示的问题:  在lineedit和其它按钮之间切换焦点时,注意lineedit的设置有顺序,否则当失去焦点时仍有光标闪,或者得到焦点无光标。  使lineedit有效:lineedit-&gt;setEnabled(true);lineedit-&gt;setFocus();    使lineedit无效:l…

    2022年10月5日
  • jvm调优基本思路(jmp如何分析两组数据的关系)

    堆大小设置JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制。32位系统下,一般限制在1.5G~2G;64为操作系统对内存无限制。我在WindowsServer2003系统,3.5G物理内存,JDK5.0下测试,最大可设置为1478m。典型设置:java -Xmx3550m-Xms355

    2022年4月16日
  • validation[通俗易懂]

    validation[通俗易懂]validation说明后台开发需要对对象的传进来的参数进行校验,有专门的校验工具,validationbean是基于JSR-303标准开发出来的,使用注解方式实现,及其方便,但是这只是一个接

    2022年8月2日
  • 虚拟机安装xp要多久_虚拟机vmware安装教程

    虚拟机安装xp要多久_虚拟机vmware安装教程    最近使用VMware虚拟机安装XP3时老是弹出找不到A:/GHOSTERR.TXT的错误提示信息,开始以为是下载的ISO镜像文件有问题,就又重新下载了一个雨林木风版本的,可是安装时还是遇到同样的问题,说明镜像ISO问题不大。于是上网google了上述提示信息,发现很多人安装XP都遇到过,大致是磁盘或光盘的问题,有人建议对磁盘进行分区或格式化。    于是,利用雨林木风自带的工具将分

    2022年8月16日
  • Typescript 教程

    Typescript 教程https://zhongsp.gitbooks.io/typescript-handbook/content/https://ts.xcatliu.com/es6入门http://es6.ruanyifeng.com/#docs/string#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2

    2022年10月25日
  • MATLAB中imfill()函数[通俗易懂]

    MATLAB中imfill()函数[通俗易懂]函数功能:该函数用于填充bai图像区域和“空洞”。语法格式:BW2=imfill(BW)这种du格式将一张二值图像显示在屏zhi幕上,允许用户使用鼠标在图像上点几个点,这几个点围成的区域即要

    2022年8月4日

发表回复

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

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