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


相关推荐

  • 总结:程序员的三大出路怎么写_程序员年龄大了的出路

    总结:程序员的三大出路怎么写_程序员年龄大了的出路自己也是一个程序员,整天coding,debugging,有时候也在想,真的有一天写不动了,或者公司更倾向于用年轻人做这些事,因为便宜而且有精力,那我怎么办?虽然国外也有很多老程序员,像我认识的几个德国同事,年纪一大把了,还是个软件工程师,干得还有滋有味。他们不在乎名也不在乎利,全在兴趣。可我不一样啊!国内和国外的环境也不同。时常到网上了解一些程序员的出路问题,总结起来觉得下面三条比较可行。

    2022年10月10日
    3
  • 流程追踪高亮图详细实现__activiti版本和flowable版本(支持驳回等)

    流程追踪高亮图详细实现__activiti版本和flowable版本(支持驳回等)在使用流程引擎的过程。如果有一张图示,可以展示流程具体到哪个环节,哪些环节已经执行过了,哪些环节没有执行过,这样子就会显得非常直观,可谓一图胜千言,流程追踪高亮图就是其中一种。一、效果展示二、源码获取activiti版本:https://github.com/wellzhi/springboot-activiti/tree/master/src/main/java/com/dapeng…

    2022年5月21日
    43
  • 软件原型设计工具

    软件原型设计工具

    2022年1月23日
    42
  • oracle 第一范式,数据库范式之第一范式

    oracle 第一范式,数据库范式之第一范式数据库范式(DatabaseNormalization)设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小。目前关系数据库有六种范式:第一范式(1NF)、第二范式(2NF)、第三范式(3NF)、巴斯-科德范式(BCNF)、第四范式(4NF)和第五范式(5NF,还又称完美范式)。首先要明白”范式(NF)”…

    2022年5月24日
    37
  • 视图索引总结

    视图索引总结一、视图的内部排序问在SQLServer里是不建议对视图进行排序的,下面是一位SQLServer专家的话:DontputORDERBYStatementsinViews.Delaysortinguntilyoureactuallyabouttousethedata.Ifyouendupsortingdiff

    2022年7月22日
    9

发表回复

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

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