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

前端之家收集整理的这篇文章主要介绍了详解layui中的树形关于取值传值问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: left">本文介绍了layui中的树形关于取值传值问题,分享给大家,具体如下:


<p style="text-align: center">

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

最后解决方案是

//<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>节点数据 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值
}
});

    //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>选中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-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0].checked) {
            xtree_count++;
          }
        }
        if (xtree_count <= 0) {
          _this.getChildByClassName(xtree_p,'layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0].checked = false;
          _this.getChildByClassName(xtree_p,'layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0].nextSibling.classList.remove('layui-form-checked');
        } else {
          _this.getChildByClassName(xtree_p,'layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0].checked = true;
          _this.getChildByClassName(xtree_p,'layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0].nextSibling.classList.add('layui-form-checked');
        }
        this.ParendCheck(_this.getChildByClassName(xtree_p,'layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0]);
      }
    }

    //渲染之前按照选中的末级去改变父级选中状态
    layuiXtree.prototype.ParentCheck<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Checked = function (e) {
      var _this = this;
      if (e.parentNode.parentNode.getAttribute('class') == 'layui-xtree-item') {
        var _pe = _this.getChildByClassName(e.parentNode.parentNode,'layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0];
        _pe.checked = true;
        _this.ParentCheck<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Checked(_pe);
      }
    }

    //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>全部选中的末级check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>对象
    layuiXtree.prototype.GetChecked = function () {
      var _this = this;
      var arr = new Array();
      var arrIndex = 0;
      var cks = _this.getByClassName('layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>');
      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;
    }

    //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>全部的原始check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>对象
    layuiXtree.prototype.GetAllCheck<a href="/tag/Box/" target="_blank" class="keywords">Box</a> = function () {
      var _this = this;
      var arr = new Array();
      var arrIndex = 0;
      var cks = _this.getByClassName('layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>');
      for (var i = 0; i < cks.length; i++) {
        arr[arrIndex] = cks[i];
        arrIndex++;
      }
      return arr;
    }

    //根据值来<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>其父级的check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>原dom对象
    layuiXtree.prototype.GetParent = function (a) {
      var _this = this;
      var cks = _this.getByClassName('layui-xtree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>');
      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-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>')[0];
        }
      }
      return null;
    }
  }
});

}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章