zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    【集训第二天·翻水的老师】--ac自动机+splay树
    【集训第一天·特来卖萌】树链剖分之水水的例题
    1.ARM寄存器简解
    2.汇编代码的简单实现
    Android之Activity 生命周期
    Android之SQLite
    魅族 -- 禁止D及以下级别LOG的输出
    常用的SQL语句
    Android开发工具
    Android介绍
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4280024.html
Copyright © 2011-2022 走看看