jquery——zTree, 完美好用的树插件
这绝对是我见过最完美的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, 完美好用的树插件的更多相关文章
- zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
- JQuery树插件——ztree
API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- zTree -- jQuery 树插件 使用方法与例子
简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...
- 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件
效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...
- Jquery ztree树插件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Jquery ztree树插件2
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- zTree：一个依靠 jQuery 实现的多功能 “树插件”
官方网站: http://www.treejs.cn/v3/main.php#_zTreeInfo 使用方式: 步骤1.文件准备 将需要使用的 zTree v3.x 相关的 js.css.img 文件 ...
- zTree -- jQuery 树插件实现点击文字展开子节点
新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...
随机推荐
- mongodb的地理空间索引如何在solr中体现
"$near"是唯一一个会对查询结果进行自动排序的地理空间操作符 "$near"的返回结果是按照距离由近及远排序的.其他排序条件不会生效. 这种按照地理位置远近 ...
- RecyclerView更通用——listView的onItemClick,onLongItemClick,addHeaderView,addFooterView
一.点击事件 setOnItemClickListener,setOnItemLongClickListener RecyclerView中虽然没有提供上面这两个接口,但是给我们提供了另外一个接口:O ...
- Android学习手记(3) Activity间传递数据
1. 简单数据传递 建立两个Activity,名称分别为MainActivity和TheAty,在MainActivity中新建一个Button,id为btnStartAty.在TheAty中新建一个 ...
- gis基本概念之"投影变换"-浅谈
目录 1,概述 2,常用的投影方法有 正解变换 反解变换 数值变换 3,定义投影 4,投影变换 1,栅格(投影变换) 2,要素(投影变换) 注意 1,概述 因为GIS描述的是位于地球表面的信息,所以根 ...
- 读取XML文件的几种方式的效率分析
第一种:使用XmlReader来读取. Stopwatch sw = Stopwatch.StartNew(); List<Dictionary<string, string>> ...
- 28 Corn表达式详解 (转自http://blog.csdn.net/claram/article/details/51785193）
Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month ...
- Convert String to Long
问题: Given a string, write a routine that converts the string to a long, without using the built in f ...
- java rmi 使用方法
server package Server; import java.rmi.Naming; import java.rmi.RMISecurityManager; import java.rmi.r ...
- sqoop 1.4.4-cdh5.1.2快速入门
一.快速入门 (一)下载安装 1.下载并解压 wget http://archive.cloudera.com/cdh5/cdh/5/sqoop-1.4.4-cdh5.1.2.tar.gz tar - ...
- 解决animate动画连续播放bug
在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...