Probleme im Zusammenhang mit der Wertübergabe in Laui

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Baumform in Laui zum Wertübertragungsproblem vorgestellt. Jetzt teile ich sie mit Ihnen und gebe Ihnen eine Referenz.

Dieser Artikel stellt das Problem der Wertübergabe in der Baumform in Laui vor. Die Details sind wie folgt:

Dies ist der Effekt, den wir benötigen. Zuerst wird das Rendering durchgeführt und dann wird die Methode ausgeführt. Nach dem Debuggen haben wir festgestellt, dass dies ein vorrangiges Problem ist .

Die endgültige Lösung ist

<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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von Vue-Router zum Erstellen der unteren Navigationsleiste in Vue-Cli (ausführliches Tutorial)

Anleitung Verwenden Sie den Vue-Router-Modus und die Hooks (ausführliches Tutorial)

So verwenden Sie Radio in AngularJS, um eine der beiden Optionen auszuwählen (ausführliches Tutorial)

Holen Sie sich die Wertmethode des standardmäßig ausgewählten Optionsfelds in AngularJS (ausführliches Tutorial)

Umfassende Interpretation von CLI in Vue (ausführliches Tutorial)

So ändern Sie den Radiostatus dynamisch über js (ausführliche Anleitung)

Das obige ist der detaillierte Inhalt vonProbleme im Zusammenhang mit der Wertübergabe in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!