• 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>

  • 相关阅读:
    【机器学习】浅谈协方差
    python {}.format
    【机器学习】准确率、精确率、召回率
    【声纹识别】 EER
    【机器学习】 最形象的入门
    逻辑卷-LVM
    RAID及软RAID的实现
    输入数字or 字符串,统计重复次数---字典统计练习
    Python-数据结构之dict(字典*****)
    POJ 3204 网络流的必须边
  • 原文地址:https://www.cnblogs.com/yxwkf/p/3876491.html
Copyright © 2020-2023  润新知