Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑。。。
1.ztree子节点横向显示(下图):


效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5个(修改位置在zTreeStyle.css里面哦,在外面设置不上的,页面也获取不到想要设置样式的节点。。。如果你能还望赐教)代码如下:
.ztree>li>ul>li>ul>li>ul{overflow:hidden;}
.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.待续...先写这三个吧......
Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态的更多相关文章
- {二逼小青年的记事簿}为什么treelist不会显示子节点的文字?
<TreeView Name="treeView" DockPanel.Dock="Left" MinWidth="200" > ...
- zTree实现删除树子节点
zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...
- (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点,搜索到子节点显示父节点(filter-node-method)
案例下载:https://gitee.com/tudoumlp/just1.git (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...
- C# TreeView的CheckBox 父/子节点点击联动选择效果
注: 点击时请正常速度点击,不然会出现“奇怪”现象!!! /// <summary> /// 节点点击 子级->同级->父级 /// </summary> /// ...
- zTree模糊搜索,显示全部节点和高亮显示
function searchFun() { var value; if($("#code2").val()!=null && $("#code2&quo ...
- Winform CheckBox组,先横向排列,后纵向排列,点击文字,改变Checkbox的状态的方法
开始选用的CheckedListBox控件,不能实现,改为使用ListView控件,可以满足需求.操作步骤如下: 1.将ListView的属性View改为SmallIcon. 2.CheckBox ...
- jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- jquery zTree 查找所有的叶子节点
jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...
- Ztree右键事件,如何让指定的子节点不显示右键菜单。
这里我记录一下我自己的解决方案: 1.首先在Ztree的setting设置中加一个鼠标右键回调函数onRightClick,然后在加一个beforeRightClick(具体含义可以看官方API) v ...
随机推荐
- Hibernate_Validator学习分享
1. Hibernate Validator介绍 1.1 背景 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过某种手段来确保输入进来的数据从 ...
- centos ios镜像文件 安装详细
1.挂载iOS镜像(先打开VM 选择虚拟机---->设置-->CD ---->使用ISO镜像文件 用浏览打开) 2.开始界面选择 3出现下面的界面 这是提示你是否扫描文件的完整性 我 ...
- UE4 difference between servertravel and openlevel(多人游戏的关卡切换)
多人游戏的关卡切换分为无缝和非无缝.非无缝切换时,客户端将跟服务器断开连接,然后重新连接到同一个服务器,服务器则加载一个新地图.无缝切换不会发生这样的情况. 有三个函数供我们使用:UEngine::B ...
- Ubuntu命令模式基础
Ubuntu是一个自由.开源.基于Debian的Linux发行版.在ubuntu的基础上,又衍生其它各具特色的Linux发行版.首先是一个操作系统,操作系统用于管理电脑硬件.要发挥出电脑的作用,还得依 ...
- nginx二级域名配置自动跳转到一级域名
nginx二级域名配置自动跳转到一级域名 rewrite配置内容: if ($http_host !~ "^www.aaa.com$") { rewrite ^(.*) http: ...
- Mybatis中使用 #{} 和 ${} 向sql传参时的区别
今天在工作时,使用MyBatis中向sql传递两个参数时,一直显示SQL语法错误,仔细检查,才发现传入的参数被加上了引号,导致传入的参数(要传入的参数是表名)附近出现语法错误. 错误写法: } a } ...
- [leetcode-582-Kill Process]
Given n processes, each process has a unique PID (process id) and its PPID (parent process id). Each ...
- .net MVC开源项目分享(1) 项目的基本情况
介绍 本项目是mvcsolution框架的分支. 原项目地址:https://github.com/leotsai/mvcsolution/ 本项目地址:https://github.com/hewe ...
- Web自动化之Headless Chrome概览
Web自动化 这里所说的Web自动化是所有跟页面相关的自动化,比如页面爬取,数据抓取,页面内容检测,页面功能测试,页面加载性能测试,页面回归测试等等,当前主要由如下几种解决方式: 文本数据获取 这就是 ...
- MyBatis源码解析【1】准备工作
终于迎来了这一天,我觉得现在的我在经历了长时间的学习和开发之后有了一定的经验,所以准备开始学习源码. 今天我将做好充足的准备,在接下来的一个月中,努力的爬过这座大山.(可能不用一个月,但是我觉得需要仔 ...