Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑。。。

1.ztree子节点横向显示(下图):

效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5个(修改位置在zTreeStyle.css里面哦,在外面设置不上的,页面也获取不到想要设置样式的节点。。。如果你能还望赐教)代码如下:

1 .ztree>li>ul>li>ul>li>ul{overflow:hidden;}
2 .ztree>li>ul>li>ul>li>ul>li{float: left;width: 19%;height:46px;box-sizing: border-box; }

代码很简单,只是当初自己找起来不是很好找,并且一定加高度哦(坑1),不加高度如果还有4级子节点的话点击收缩和展开会影响布局滴~~~

2.点击文字勾选当前文字前对应的“input”:

这个效果其实挺简单的,默认点击文字是不勾选当前input的(ztree中用span给css表示)效果只要两行代码哦:

//点文字勾选
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                // treeObj.checkNode(treeNode, !treeNode.checked, true); //切换勾选状态
                treeObj.checkNode(treeNode, true, true); 

注意:此代码写在配置的方法的onclick事件函数中哦~~

3.去除指定位置input的勾选状态:

for(var i=0; i<idAttr.length ; i++){

                $NodeByParamS    = treeObj.getNodeByParam("id", idAttr[i], null);
                treeObj.checkNode($NodeByParamS, false, true);//取消勾选
            }
treeObj.checkNode(坑2_没“s”) 通过 zTree 对象执行此方法,根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象;4.待续...先写这三个吧......
时间: 2024-10-08 21:57:08

Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态的相关文章

zTree实现删除树子节点

1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href=&

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

实现根据父节点显示子节点的无极限分类的完整操作

数据表是设计 包含 id  name   pid   三者 就可以了 第一步: controller: public function actionFunctionPoint() { $items = FunctionPoint::getFunctionPoint(); return $this->render('function-point', [ 'items' => $items, ]); } 第二部 model操作数据库 /** * 获得所有系统功能 * @return array *

jquery zTree 查找所有的叶子节点

// 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 result: 用于保存叶子节点的数组 */ // 获取所有叶子节点 function getAllLeafNodes(treeNode, result) { if (treeNode.isParent) { var childrenNodes = treeNode.children; if (childrenNodes) { for (va

easyUI树形节点点击和动态添加Tab-

easyUI是一种基于jQuery的UI框架,可以直接阅读官网的API教程学习,最近做的项目要用到这个框架,就一边看一边做,先看一下动态添加Tab,实际项目中我们都是希望点击一个节点,增加一个iframe的窗口出来,但是昨天看着API做一个简单的点击A标签增加iframe,死活就是不行,晚上回去终于搞定,看一下官方的例 [html] view plain copy print? function addTab(title, url){ if ($('#tt').tabs('exists', ti

父兄子节点的获取及子节点的添加、删除、克隆操作

第一.父兄子节点的获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> </

元素的子节点

元素的childNodes属性中包含了他的所有子节点,这些子节点有可能是元素,文本节点,注释或者处理指定,也就是所 例如: <ul id="myList"> <li>Iten1</li> <li>Item2</li> <li>Item3</li> </ul> 在不同的浏览器中,返回ul元素的子节点的数目不同,,因为li元素之间的空格,所以在除IE之外的其他浏览器之中,会返回子节点的数目为7,

ztree实现权限功能(横向显示)

最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不错. 但是,后来测试在用十年前的笔记本测这个功能的时候,发现特别的卡,导致浏览器都崩溃了.所以,性能优化开始了. 1.同步改为异步,虽然不卡,但是功能不满足,很多人勾选了一个父节点(模块节点),就保存,此时子节点根本没有,所以保存的数据是有问题的. 2.设置showIcon和showLine为fal

zTree异步生成数据时无法获取到子节点的选中状态

最近在项目中遇到一个问题,需求如下: 根据选中不同的人员(ID)向后台发送ajax请求,通过返回的数据来生成该人员的权限访问树,该树目录最少为3级目录,在生成的时候会自动勾选上次保存过的选中状态,点击保存后会将选中状态发送给后端用于保存.(zTree的api参考网站http://www.ztree.me/v3/api.php) 遇到的bug: 用户必须再次点击已选中的根目录,并重新选中一次才能在保存的时候将其根目录及所有选中的子节点ID号提供给后端,如果用户不做任何操作直接点击保存,则只能获取到