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. solr和mongodb比较

    solr非常灵活,虽然mongodb添加索引查询速度比较快,但是solr查询比mongodb更加灵活,所以需要获取mongodb的oplog,实时将oplog中的数据推送到solr中 oplog A  ...

  2. cookie有效期到了后，是由浏览器还是由系统还删除的

    Cookie可以保持登录信息到用户下次与服务器的会话,换句话说,下次访问同一网站时,用户会发现不必输入用户名和密码就已经登录了(当然,不排除用户手工删除Cookie).而还有一些Cookie在用户退出 ...

  3. MVC bundles

    Bundles用于打包CSS和javascript脚本文件,优化对它们的组织管理.显示模式则允许我们为不同的设备显示不同的视图. 减少请求数量和带宽,当然在开发调试时一般不开启.

  4. PHP编程规范

    好的编程规范不仅是对阅读者的负责,也是对自身的负责: ----割---- 一直以来我都是以php函数的风格来写php,所有变量,函数,类都使用小写,单词之间以下划线隔开,一直比较排斥驼峰式的代码规范, ...

  5. DWZ简介及其使用

    来源:http://blog.csdn.net/t123012009065/article/details/8286826 DWZ简介:   DWZ富客户端框架(jQuery RIA framewor ...

  6. IO流（随机流，数组内存流

    File file1=new File("test1.txt"); RandomAccessFile in2=new RandomAccessFile(file1,"rw ...

  7. C#01

    C#语言 求4名同学三门成绩的平均值 using System; using System.Collections.Generic; using System.Linq; using System.T ...

  8. 关于Sublime text 2中Emmet的安装 _html:xt无效

    其实这个网上很多教程,有一些方法是可行的,但是有一些方法是行不通的. 虽然Sublime text 2有不同平台的版本,但是安装起来,还是有点差异的. 先简单介绍一下Emmet,Emmet是Zen-c ...

  9. C++ AO读取shapefile的属性值

    C++ AO读取一个shapefile文件的所有属性值   #include "stdafx.h"   #include "iostream.h"   #inc ...

  10. 三种实现PHP伪静态页面的方法（转）

    PHP伪静态写法--其一 伪静态又名:URL重写 以下列举了三种方法. 方法一: 比如这个网页 http://www.2cto.com /soft.php/1,100,8630.html 其实处理的脚 ...