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>

jquery——zTree, 完美好用的树插件的更多相关文章

  1. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

  2. JQuery树插件——ztree

    API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...

  3. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  4. zTree -- jQuery 树插件 使用方法与例子

    简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...

  5. 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件

    效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...

  6. Jquery ztree树插件

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. Jquery ztree树插件2

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. zTree：一个依靠 jQuery 实现的多功能 “树插件”

    官方网站: http://www.treejs.cn/v3/main.php#_zTreeInfo 使用方式: 步骤1.文件准备 将需要使用的 zTree v3.x 相关的 js.css.img 文件 ...

  9. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

随机推荐

  1. hdu 2156

    #include <iostream> #include <stdio.h> using namespace std; int main() { int i,n; while( ...

  2. requirejs和r.js的心得

    requirejs的GitHub:requirejs r.js的GitHub:r.js grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs r ...

  3. mongodb创建副本集命令

    mongodb创建副本集命令 ./mongod --replSet spock --dbpath ../data --smallfiles > config ={... "_id&qu ...

  4. 使用FileResult返回浏览器文件及乱码问题解决

    一.向客户端发送文件方法 Asp.Net 中返回文件方法 public void TxtFile(string filename) { //html文件 string path = @"E: ...

  5. XFire构建服务端Service的两种方式

    1.原声构建: 2.集成spring构建 http://blog.csdn.net/carefree31441/article/details/4000436XFire构建服务端Service的两种方 ...

  6. iptables里filter表前面几个数字的意思

    一般的linux系统iptables配置文件filter表前面都带下面三行,但是具体是什么意思呢! *filter:INPUT ACCEPT [0:0]:FORWARD ACCEPT [0:0]:OU ...

  7. UITableView实现分组, 并且点击每个分组后展开

    效果图: 简单说下实现思路: 数据传过来之后, 先创建好对应个数的分组头部View, 也就是要在 - (UIView *)tableView:(UITableView *)tableView view ...

  8. [欢度国庆]为什么我们今天还要学习和使用C++？（转载）

    在各种新的开发语言层出不穷的今天,在Java和C#大行其道今天,我们为什么还要学习和使用C++?现在学习C++将来有用吗?学习C++要花费那么多时间和精力,这一切都值得吗?现在学习C++有钱途吗? 这 ...

  9. 跟我学android-搭建Android开发环境（一）

    Android官网地址:http://developer.android.com/,下载和安装 AndroidSDK请按如下步骤进行: 下载ADT 和SDK:http://developer.andr ...

  10. 利用google浏览器开发者工具调试网页（详）

    前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者同行们,话不多说 ...