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)
上一篇 2021年11月30日 下午11:00
下一篇 2021年12月1日 上午6:00


相关推荐

  • 联想拯救者y7000按键功能_联想Y7000P屏幕闪现白色横条

    联想拯救者y7000按键功能_联想Y7000P屏幕闪现白色横条前阶段买了一个拯救者Y7000P,记录一下功能键的使用:1、一些基本的使用就不详细说了Fn+F1-F11(音量亮度调节等等):其中Fn+F4是关闭开启麦克风,Fn+F7是用来设置扩展屏幕的场景Fn+F9进入设置界面Fn+F10关闭开启摄像头Fn+F11关闭开启触摸板开启关闭切换键盘灯:Fn+Space(空格)切换三种工作模式:Fn+Q键开启关闭屏幕上的Y字logo:Fn+L键2、Fn+Q切换的三种模式:(切换时需接通电源)安静模式:

    2026年1月29日
    7
  • pycharm使用pip安装第三方库_pycharm详细安装教程

    pycharm使用pip安装第三方库_pycharm详细安装教程python的安装教程1.打开python官网2.windows系统点Downloads下面的windows3.带64的表示电脑是64位系统的,其中不带64的表示32位操作系统的,而右边一列数字后面有字母(即带有后缀)的不建议下载,就是临时版本,而我们最好下载3.6的版本。1.DownloadWindowsx86-64embeddablezipfile这是一个压缩文件2.DownloadWindowsx86-64executableinstaller这是一个可执行的文件

    2022年8月26日
    7
  • mediapipe动态手势识别

    mediapipe动态手势识别

    2026年3月15日
    2
  • Python解答蓝桥杯省赛真题之从入门到真题

    Python解答蓝桥杯省赛真题之从入门到真题搜了很多历年蓝桥杯真题解答 大多都是 Java C C 这些语言编写的代码解析 Python 解析的几乎 甚至可以说没有 而当下 Python 又这么火热 蓝桥杯也出了 Python 组 所以打算写一个 Python 解答蓝桥杯真题的博客 供大家参考 也在这过程中和大家一起交流

    2026年3月18日
    3
  • js打印页面指定区域内容

    js打印页面指定区域内容js 打印页面指定区域

    2026年3月20日
    3
  • hadoop常用命令汇总[通俗易懂]

    hadoop常用命令汇总[通俗易懂]1、查看目录下的文件列表:hadoop fs –ls [文件目录]hadoop fs -ls -h /lance 2、将本机文件夹存储至hadoop上:hadoop fs –put [本机目录] [hadoop目录] hadoop fs -put lance / 3、在hadoop指定目录内创建新目录:hadoop fs –mkdir [目录] hadoop fs -mkdir /lance4、在…

    2022年6月24日
    32

发表回复

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

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