Solution au problème de transmission de valeur dans la forme de l'arbre dans layui

Cet article présente principalement l'explication détaillée de la forme de l'arbre dans layui sur le problème de l'acquisition de valeur et du transfert de valeur. L'éditeur pense que c'est assez bon. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un oeil, j'espère que cela pourra aider tout le monde

C'est l'effet dont nous avons besoin. En fonctionnement réel, le rendu sera effectué en premier puis le. La méthode sera exécutée. Ensuite, nous avons découvert que le JSON en forme d'arborescence était vide. Je l'ai débogué N fois et j'ai pensé que c'était un problème prioritaire.

La solution finale est

<script type="text/javascript">
  ////layui 的 form 模块
  var form = "";
  layui.use([&#39;form&#39;], 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: &#39;xtree1&#39;,
          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(&#39;btn1&#39;).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(&#39;class&#39;) == &#39;layui-xtree-item&#39;) {
            var xtree_all = _this.getChildByClassName(xtree_p, &#39;layui-xtree-item&#39;);
            var xtree_count = 0;
            for (var i = 0; i < xtree_all.length; i++) {
              if (_this.getChildByClassName(xtree_all[i], &#39;layui-xtree-checkbox&#39;)[0].checked) {
                xtree_count++;
              }
            }
            if (xtree_count <= 0) {
              _this.getChildByClassName(xtree_p, &#39;layui-xtree-checkbox&#39;)[0].checked = false;
              _this.getChildByClassName(xtree_p, &#39;layui-xtree-checkbox&#39;)[0].nextSibling.classList.remove(&#39;layui-form-checked&#39;);
            } else {
              _this.getChildByClassName(xtree_p, &#39;layui-xtree-checkbox&#39;)[0].checked = true;
              _this.getChildByClassName(xtree_p, &#39;layui-xtree-checkbox&#39;)[0].nextSibling.classList.add(&#39;layui-form-checked&#39;);
            }
            this.ParendCheck(_this.getChildByClassName(xtree_p, &#39;layui-xtree-checkbox&#39;)[0]);
          }
        }

        //渲染之前按照选中的末级去改变父级选中状态
        layuiXtree.prototype.ParentCheckboxChecked = function (e) {
          var _this = this;
          if (e.parentNode.parentNode.getAttribute(&#39;class&#39;) == &#39;layui-xtree-item&#39;) {
            var _pe = _this.getChildByClassName(e.parentNode.parentNode, &#39;layui-xtree-checkbox&#39;)[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(&#39;layui-xtree-checkbox&#39;);
          for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked && cks[i].getAttribute(&#39;data-xend&#39;) == &#39;1&#39;) {
              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(&#39;layui-xtree-checkbox&#39;);
          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(&#39;layui-xtree-checkbox&#39;);
          for (var i = 0; i < cks.length; i++) {
            if (cks[i].value == a) {
              if (cks[i].parentNode.parentNode.getAttribute(&#39;id&#39;) == _this._container.getAttribute(&#39;id&#39;)) return null;
              return _this.getChildByClassName(cks[i].parentNode.parentNode, &#39;layui-xtree-checkbox&#39;)[0];
            }
          }
          return null;
        }
      }
    });
  }

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

Recommandations associées :

Résumé Plusieurs méthodes pour transmettre des valeurs dans le développement d'applets WeChat

Explication détaillée des valeurs des boutons radio, des boutons à cocher et des listes déroulantes dans les balises de formulaire Vue.js

Résumé des méthodes de transmission et de récupération de valeurs pour les mini-programmes WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!