Ztree基本模板

<!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>
猜你喜欢
