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

摘要:
几天前,该项目需要树结构来表示数据,可以满足ztree的要求。所以直接使用ztree只是一小步。。。

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

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

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

效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示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”:

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

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

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

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

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

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

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.待续...先写这三个吧......

免责声明:文章转载自《Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇指令脚本redis线上环境监控脚本(python脚本)SQL server 中 COUNT DISTINCT 函数下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

input输入框联想功能

一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的问题。还是直接上代码吧。 首先是一个简单的界面 auto.jsp <%@ page language="java" contentType="text/...

Jquery Ztree异步加载树

更多JS实战记录,请前往:https://www.yuque.com/smallwhy/yyvuqy 1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree/master/ 2. 目录结构 3. async...

视频H265格式压缩,软件压缩方法,硬件的没有条件,没法测试。

libx265软压c:/ffmpeg/ffmpeg.exe -i input.mp4 -c:v libx265 -preset:v fast output.mp4 原文件大小:610.87mb 目标文件大小:214.157mb 转换速度 1.68x 文件长度00:39:44.89 转换时长:1406.60秒=======================...

js实现全选和取消全选

HTMl      <input type="checkbox" name="allCheckBox" />      <br/>       <input type="checkbox" name="checkbox" />        <input type="checkbox" name="checkb...

H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

H5使用input标签调用系统默许相机,摄像,录音功能。使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input type="file" accept="image/*" capture="camera"> <input type="file" accept...

if 嵌套if 的先后顺序的区别 (自测)

# 验证 verify very good!# username = input("请输入用户名").capitalize()# password = input("请输入密码:").upper()# verify_code = input("请输入验证码: ")        # 最后发现,这个要放在while循环里面.第一种情况:if用户名和密码...