zTree 点击节点关闭树

2024-11-05

JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭

好像没找到现成的,就自己写了一个demo. 效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script

zTree入门-最简单的树

最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,所以就想自学一下zTree,参照官方文档写了一个简单的案例,使用zTree做了一个最简单的树形结构. 案例:zTree 最简单的树效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>zTree 最简单的树</title> <link rel=&

使用zTree和json构建简单树节点

我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=>array( 'id' => 1, 'pid' => 0, 'name' => 'china', 'son' => array( array( 'id' => 3, 'pid' => 1, 'name' => 'Beijing', ), array( 'id' =&

ztree 文件夹类型的树状图

未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件选择领导弹窗*/ .xuandao{ display: none; } .xuandao_1{ position: fixed; z-index:; top:; left:; width: 100%; height: 100%; background:rgba(0,0,0,0.2) none repeat scroll !important;

ztree实现表格风格的树状结构

zTree官方api: http://www.treejs.cn/v3/api.php 原理很简单:利用zTree的addDiyDom方法,自定义每个DOM节点,在原来的节点后面加一些div,再利用css样式使它看起来像个表格. 实现代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Demo by d

jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题

这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先下载zTree,点击我跳转到一个网站进行下载代码直接贴出来 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link

jquery——zTree, 完美好用的树插件

Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. __________________________________________________________________________________ 以下是简单的使用demo: <!DOCTYPE html> <html> <head> <title>ZTREE DEMO - Standard Data </title> &l

ztree点击节点实现选中/取消复选框

效果代码在js中初始化tree时设置复选框操作只影响子节点复选框事件,想怎么处理就怎么处理

【zTree】zTree展开树节点

今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); /* 获取所有树节点 */ var nodes = treeObj.transformToArray(treeObj.getNodes()); //当再次点击节点时条件不符合,直接跳出方法 // 遍历树

zTree开发下拉树

最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree来实现下拉树. 这里使用简单的数据格式(即简单的Json格式)类似如下Json: var zNodes =[ {id:1, pId:0, name:"北京"}, {id:2, pId:0, name:"天津"}, {id:3, pId:0, name:"上海&

爱上MVC3~MVC+ZTree大数据异步树加载

回到目录理论部分: MVC+ZTree:指在.net MVC环境下进行开发,ZTree是一个jquery的树插件大数据:一般我们系统中,有一些表结构属于树型的,如分类,地域,菜单,网站导航等等,而像分类这种表,它的数据量是递增的,不同遇见的,可能几条,几万条,而随着站点的运营,也可能达到几十万条,如果这样的大数据,采用一次读数据到页面的方式,是不可取的,先不说给服务器的压力有多大,只是客户端的浏览器估计就要挂掉,谁愿意加载一个页面等上10多分钟呀,呵呵! 异步加载:这种方式已经成为主流,异步

jq生成目录文件树jQuery Ztree基本用法

转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree" class="ztree"></ul> 2.定义ztree的配置参数 ? 1 2 3 4 5 6 7 8 9 10 11 var setting = { //check属性放在data属性之后,复选框不起作用 check: { en

MVC小系列（十四）【MVC+ZTree大数据异步树加载】

ZTree是一个jquery的树插件可以异步加载第一步定义一个标准的接口(指的是与ztree默认的数据元素保持一致) /// <summary> /// ZTree数据结构 /// </summary> public interface IZTree { /// <summary> /// 节点ID /// </summar int id { get; set; } /// <summary> /// 节点名称 /// </summary>

【原创】MVC+ZTree实现权限树的功能

今天自己采用MVC+ZTree的技术实现权限树的功能,有需要的可以收藏一下. 1.需要引用的JS 文件 <link href="~/Content/ZTree/css/demo.css" rel="stylesheet" /> <link href="~/Content/ZTree/css/metroStyle/metroStyle.css" rel="stylesheet" /> <script

zTree 优秀的jquery树插件

zTree 优秀的jquery树插件,文档详细,渲染快使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="~/Content/zTree_v3/js/jquery.ztree.core.min.js"></script> &

转：zTree树控件实战篇：针对多个下拉加载zTree树应该如何做出合理的配置

今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载树的一些关键配置以及原理的不太深入导致问题无从查起.今天就来一起聊聊这样一个下拉加载zTree的问题. 一.几个关键的配置需要注意 1.针对不同的下拉选择需要有自己独立控制zTree显示位置以及隐藏相应标签的方法: 2.需要根据所点击事件定位zTree的显示位置: 3.zTree树选择后需要加以判断

zTree静态树与动态树的用法——（七）

0.[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件兼容 IE.FireFox.Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成和 Ajax 异步加载两种方式支持多种事件响应及反馈支持 Tree 的节点移动.编辑.删除支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能简单的参数配置实现灵活多变的功能 zTree博

ztree树的模糊搜索功能

在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择具体实现过程如下: 第一步:ui设计一个input输入框,用于输入用,下方一个div或者是一个ul用于ztree树用 <ul class="list"> <li class="title"> 城市:<input id="citySel&qu

树插件 ztree 的基本用法

因业务需要用到 ztree 插件第一次用tree插件上手有点难度官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 第一步:初始化树,树的所有数据从后台请求所得 //首页加载左边树形AJAX $.ajax({ dataType:'json', type:'post', url:'http://192.168.0.51:8184/wd-service/api/dict/findParentDict', //请求成功=============== su

树形插件zTree与组织插件jOrgChart交互

<html> <head> <title>组织架构</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="jquery.ztree/style.css" rel="stylesheet" /> <link href="j

Jquery结合Ztree生成树

尊重作者,附原文链接:http://my.oschina.net/u/2472104/blog/529055 Ztree的api http://www.ztree.me/v3/api.php Ztree的网上demo http://www.ztree.me/v3/demo.php#_102 Ztree的本地demo http://yunpan.cn/cLUREC8yghHRs 访问密码 9440 一.添加样式.js <link rel="stylesheet" href=&qu

zTree 点击节点关闭树

热门专题