• 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.待续...先写这三个吧......
  • 相关阅读:
    网站设计分析:模块化——高效重构
    linux 优化git操作速度
    cool
    跨域解决方案
    vue 登录验证引擎
    scss学习笔记
    配置动态加载模块和js分模块打包,生产环境和开发环境公共常量配置
    降低版本安装flashPlayer
    python 学习日志
    centos atomic host第一次启动
  • 原文地址:https://www.cnblogs.com/cy3664983/p/6857097.html
Copyright © 2020-2023  润新知