Lauiui での値の受け渡しに関連する問題

この記事では主に、値の転送問題に関する、layui のツリー形状の詳細な説明を紹介し、参考にさせていただきます。

この記事では、layui のツリー形状での値の受け渡しの問題を紹介します。詳細は次のとおりです。

これが実際の操作で必要なエフェクトです。が最初に実行され、次にメソッドが実行されます。その後、N 回デバッグして、これが優先事項であると考えました。

最終的な解決策は

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

です

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てば幸いです。

関連記事:

vue-cli で vue-router を使用して下部ナビゲーション バーを構築する (詳細なチュートリアル)

Vue-Router パターンとフックの使用方法 (詳細なチュートリアル)

ラジオ経由angularJS 2 つのオプションのいずれかの使用方法 (詳細なチュートリアル)

angularjs でデフォルトで選択されているラジオ ボタンの value メソッドを取得する (詳細なチュートリアル)

vue での cli の包括的な解釈 (詳細なチュートリアル)

jsを介して無線ステータスを動的に変更する方法(詳細なチュートリアル)

以上がLauiui での値の受け渡しに関連する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。