详解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 相关文章推荐
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jquery实现页面加载效果
Feb 21 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
解决vue 表格table列求和的问题
Nov 06 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
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php生成shtml类用法实例
2014/12/09 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
Python struct.unpack
2008/09/06 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python 函数基础知识汇总
2018/03/09 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
工程地质勘察专业大学生求职信
2013/10/13 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
党员带头倡议书
2015/04/29 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis