详解layui中的树形关于取值传值问题


Posted in Javascript onJanuary 16, 2018

本文介绍了layui中的树形关于取值传值问题,分享给大家,具体如下:

详解layui中的树形关于取值传值问题

这个是我们需要的效果,实际操作中会先执行渲染 然后在执行方法,然后我们发现树形的JSON是空,调试了N遍一直以为是优先级别的问题了。

最后解决方案是

<script type="text/javascript">
  ////layui 的 form 模块
  var form = "";
  layui.use(['form'], function () {
    // $ = layui.jquery;
    form = layui.form;

    //获取节点数据
    getTreeData();
    //return false;
  });
  function getTreeData() {
    $.ajax({
      //async: false,
      type: "post",
      url: "/api/WebFW//getOrgTree",
      datatype: "json",
      contenttype: "application/json; charset=utf-8",
      success: function (jdata) {
        var xtree1 = new layuiXtree({
          elem: 'xtree1',
          form: form,
          data: strToJson(jdata),
          isopen: true, //false初始关闭,true打开
          click: function (data) { //节点选中状态改变事件监听,全选框有自己的监听事件
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否选中,true选中
            alert(data.value); //弹出value值
          }
        });

        //获取选中val
        document.getElementById('btn1').onclick = function () {
          var oCks = xtree1.GetChecked();
          for (var i = 0; i < oCks.length; i++) {
            alert(oCks[i].value);
          }
        }

        //子节点选中改变,父节点更改自身状态
        layuiXtree.prototype.ParendCheck = function (ckelem) {
          var _this = this;
          var xtree_p = ckelem.parentNode.parentNode;
          if (xtree_p.getAttribute('class') == 'layui-xtree-item') {
            var xtree_all = _this.getChildByClassName(xtree_p, 'layui-xtree-item');
            var xtree_count = 0;
            for (var i = 0; i < xtree_all.length; i++) {
              if (_this.getChildByClassName(xtree_all[i], 'layui-xtree-checkbox')[0].checked) {
                xtree_count++;
              }
            }
            if (xtree_count <= 0) {
              _this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].checked = false;
              _this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].nextSibling.classList.remove('layui-form-checked');
            } else {
              _this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].checked = true;
              _this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].nextSibling.classList.add('layui-form-checked');
            }
            this.ParendCheck(_this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0]);
          }
        }

        //渲染之前按照选中的末级去改变父级选中状态
        layuiXtree.prototype.ParentCheckboxChecked = function (e) {
          var _this = this;
          if (e.parentNode.parentNode.getAttribute('class') == 'layui-xtree-item') {
            var _pe = _this.getChildByClassName(e.parentNode.parentNode, 'layui-xtree-checkbox')[0];
            _pe.checked = true;
            _this.ParentCheckboxChecked(_pe);
          }
        }

        //获取全部选中的末级checkbox对象
        layuiXtree.prototype.GetChecked = function () {
          var _this = this;
          var arr = new Array();
          var arrIndex = 0;
          var cks = _this.getByClassName('layui-xtree-checkbox');
          for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked && cks[i].getAttribute('data-xend') == '1') {
              arr[arrIndex] = cks[i];
              arrIndex++;
            }
          }
          return arr;
        }

        //获取全部的原始checkbox对象
        layuiXtree.prototype.GetAllCheckBox = function () {
          var _this = this;
          var arr = new Array();
          var arrIndex = 0;
          var cks = _this.getByClassName('layui-xtree-checkbox');
          for (var i = 0; i < cks.length; i++) {
            arr[arrIndex] = cks[i];
            arrIndex++;
          }
          return arr;
        }

        //根据值来获取其父级的checkbox原dom对象
        layuiXtree.prototype.GetParent = function (a) {
          var _this = this;
          var cks = _this.getByClassName('layui-xtree-checkbox');
          for (var i = 0; i < cks.length; i++) {
            if (cks[i].value == a) {
              if (cks[i].parentNode.parentNode.getAttribute('id') == _this._container.getAttribute('id')) return null;
              return _this.getChildByClassName(cks[i].parentNode.parentNode, 'layui-xtree-checkbox')[0];
            }
          }
          return null;
        }
      }
    });
  }

  function strToJson(str) {
    var json = (new Function("return " + str))();
    return json;
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
javascript中scrollTop详解
Apr 13 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
基于JavaScript实现抽奖系统
Jan 16 #Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 #Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 #Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 #Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 #Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 #Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Django 重写用户模型的实现
2019/07/29 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
报社实习生自荐信
2014/01/24 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
小石潭记导游词
2015/02/03 职场文书
商场收银员岗位职责
2015/04/07 职场文书
公司职员入党自传书
2015/06/26 职场文书
早上好问候语大全
2015/11/10 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript