急啊啊，jquery-zTree 懂的来

quanlei1507053 2012-11-16 09:21:30



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">



  <SCRIPT LANGUAGE="JavaScript">

  

    var zNodes = <%=jsonDicts%>;

    var zTree1;

    var setting;

    setting = {

        checkable : true,

    };

    $(document).ready(function (){

        refreshTree();

    });

    

    function refreshTree(){

    	setting.callback.onClick();

        

        zTree1 = $("#treeDemo").zTree(setting, clone(zNodes));

    }



</SCRIPT>





 </head>



 <body>

   <td width=200 align=left >

                  <ul id="treeDemo" class="tree"></ul>

              </td>

 </body>

</html>

页面如下

我点击复选框，点击事情要把该广东的信息赋值到右边的文本框里面

...全文

146 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

吉普赛的歌社区高级成员 T9 2012-11-16

打赏
举报

数据库获取与写在页面上有什么区别呢？关键并不在这里。我写个demo不可能搞什么数据库，　关键的是你要看明白我的思路。我的例子能运行起来，自然就可以了。

quanlei1507053 2012-11-16

打赏
举报

引用 4 楼 yenange 的回复:

JavaScript code? 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 <!DOCTYPE html> <html> <head> <title>ZTREE DEMO - Standard Data </title……

我的数据时从数据库获取的，谢谢你，

吉普赛的歌社区高级成员 T9 2012-11-16

打赏
举报

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

ztree3.4下载地址： http://jquerytree.googlecode.com/files/JQuery%20zTree%20v3.4.zip ztree api: http://www.ztree.me/v3/api.php

quanlei1507053 2012-11-16