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>

  • 相关阅读:
    python自定义ORM并操作数据库
    python 元类理解
    Python中type()详解:动态创建类
    Centos7安装教程
    数据库建模:学生信息系统搭建实验
    数据库索引、视图与触发器
    用python批量插入数据到数据库中
    制作一个简单的部门员工知识分享的python抽取脚本
    【Mybatis】XML配置实现增删改查
    NIO,AIO,BIO
  • 原文地址:https://www.cnblogs.com/yxwkf/p/3876491.html
Copyright © 2011-2022 走看看