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

这次给大家带来layui中的树形关于取值传值详解，layui中的树形取值传值的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

最后解决方案是

  ////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;  }

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

注意事项

注意事项

注意事项

以上就是layui中的树形关于取值传值详解的详细内容，更多请关注【创想鸟】其它相关文章！