Problèmes liés à la transmission de valeur 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 transfert de valeur. Maintenant, je la partage avec vous et vous donne une référence.

Cet article présente le problème du transfert de valeur dans la forme de l'arbre dans layui. J'aimerais le partager avec vous. Les détails sont les suivants :

<.>C'est l'effet dont nous avons besoin. En fonctionnement réel, le rendu sera effectué en premier, puis la méthode sera exécutée. Ensuite, nous avons constaté que le JSON en forme d'arbre était vide après l'avoir débogué N fois, nous avons pensé que c'était une priorité. problème.

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>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Utiliser vue-router pour créer la barre de navigation inférieure dans vue-cli (tutoriel détaillé)

Comment utiliser le mode Vue -Router et les hooks (tutoriel détaillé)

Comment utiliser la radio dans angulaireJS pour choisir l'une des deux options (tutoriel détaillé)

Obtenez la méthode de valeur du bouton radio sélectionné par défaut dans angulairejs (tutoriel détaillé)

Interprétation complète de cli dans vue (tutoriel détaillé)

Comment changer dynamiquement le statut de la radio via js (tutoriel détaillé)

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!