前些天项目需要树结构表现数据,需求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的勾选状态的更多相关文章

  1. {二逼小青年的记事簿}为什么treelist不会显示子节点的文字?

    <TreeView Name="treeView" DockPanel.Dock="Left" MinWidth="200" > ...

  2. zTree实现删除树子节点

    zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...

  3. (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点,搜索到子节点显示父节点(filter-node-method)

    案例下载:https://gitee.com/tudoumlp/just1.git   (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...

  4. C# TreeView的CheckBox 父/子节点点击联动选择效果

    注: 点击时请正常速度点击,不然会出现“奇怪”现象!!! /// <summary> /// 节点点击 子级->同级->父级 /// </summary> /// ...

  5. zTree模糊搜索,显示全部节点和高亮显示

    function searchFun() { var value; if($("#code2").val()!=null && $("#code2&quo ...

  6. Winform CheckBox组,先横向排列,后纵向排列,点击文字,改变Checkbox的状态的方法

      开始选用的CheckedListBox控件,不能实现,改为使用ListView控件,可以满足需求.操作步骤如下: 1.将ListView的属性View改为SmallIcon. 2.CheckBox ...

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

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  8. jquery zTree 查找所有的叶子节点

    jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...

  9. Ztree右键事件,如何让指定的子节点不显示右键菜单。

    这里我记录一下我自己的解决方案: 1.首先在Ztree的setting设置中加一个鼠标右键回调函数onRightClick,然后在加一个beforeRightClick(具体含义可以看官方API) v ...

随机推荐

  1. IDEA报错处理:Application Server was not connected before run configuration stop, reason: Unable to ping server at localhost:8080

    把wildfly的整个软件包更换成新的,配置文件重新配置,JBOSS_HOME环境变量修改成新的,在wildfly-10.1.0.FinalForTest\modules\system\layers\ ...

  2. javaScript高级程序设计笔记 2

    Undefinde Null Boolean Number String    基本类型 Object    引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...

  3. Spring中多个工程停多个资源文件ignoreUnresolvablePlaceholders配置

    http://www.imooo.com/ruanjiangongcheng/software-architecture-design/667686.htm

  4. linux下vim 查找命令

    在命令模式下输入/word 这个是查找文件中“word”这个单词,是从文件上面到下面查找?word 这个是查找文件中“word”这个单词,是从文件下上面到面查找

  5. Git操作简介

    一 概述 1.什么是Git? Git是分布式版本控制系统. 2.集中式与分布式对比 在集中式版本控制系统中,版本库集中在中央服务器上,每次工作时都需要先从中央服务器获取最新版本,修改后,再推送到中央服 ...

  6. [leetcode-504-Base 7]

    Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...

  7. accp8.0转换教材第1章多线程理解与练习

    一.单词部分: ①process进程 ②current当前的③thread线程④runnable可获取的 ⑤interrupt中断⑥join加入⑦yield产生⑧synchronize同时发生 二.预 ...

  8. PAT-1099(Build A Binary Search Tree)

    题目见这里 分析:分四步进行 1)根据给定的结点情况建二叉树  2)对输入的键值排序(asending) 3)对二叉树中序遍历,同时对应赋key值 4)层次遍历(队列应用) 题目并不困难,但是我误入了 ...

  9. Perl根据日期分割数据文件

    Perl的优势:比C好写,比Shell高效,Linux普遍支持. #!/usr/bin/perl -w # auth: lichmama@cnblogs.com # what: split data_ ...

  10. 关于Net开发中一些SQLServer性能优化的建议

    一. ExecuteNonQuery和ExecuteScalar 对数据的更新不需要返回结果集,建议使用ExecuteNonQuery.由于不返回结果集可省掉网络数据传输.它仅仅返回受影响的行数.如果 ...