layui的tree和form同時引用出現衝突的粗略解決辦法

先來看看最終效果：

 

如圖中所示，這裏用到了無限級的類目（tree實現）和產品狀態（select實現）。

其中，無限級tree是使用了這哥們的辦法：

layui實現下拉分類多級 https://www.cnblogs.com/matengfei123/p/9444095.html

 他在文章最後提到「vue和layui的form表單衝突,去除layui的form便可」，當時就想，他vue和我純layui何關，先用上再說！

因而，悲劇了...

加上tree，select用不了；不加，tree用不了；彷佛，tree依賴form，可是又和form裏的select衝突！

網上搜了好久，也找不到現成的解決辦法；沒轍，本身動手，豐衣足食，頭鐵就是幹！

先看看代碼：

 1                 <div class="layui-inline">
 2                     <label class="layui-form-label">產品類目：</label>
 3                     <div class="layui-input-inline">
 4                         <div class="layui-unselect layui-form-select downpanel">
 5                             <div class="layui-select-title">
 6                                 <span class="layui-input layui-unselect" id="treeclass">請選擇</span>
 7                                 <input type="hidden" name="category" id="category" value="0">
 8                                 <i class="layui-edge"></i>
 9                             </div>
10                             <dl class="layui-anim layui-anim-upbit">
11                                 <dd>
12                                     <ul id="classtree"></ul>
13                                 </dd>
14                             </dl>
15                         </div>
16                     </div>
17                 </div>

 1                 <div class="layui-inline">
 2                     <label class="layui-form-label">產品狀態：</label>
 3                     <div class="layui-input-inline">
 4                         <select name="avtiveState" id="avtiveState" lay-filter="avtiveState">
 5                             <option value="0">請選擇</option>
 6                             <option value="2">銷售中</option>
 7                             <option value="3">中止銷售</option>
 8                             <option value="1">已下架</option>
 9                         </select>
10                     </div>
11                 </div>

1 layui.use('form', function () { 2     var $ = layui.jquery, form = layui.form; 3     form.on('select(supplier)', function (data) { 4         $("#supplier").val(data.value);//選中時，更改原生select的值 5  }); 6     form.on('select(avtiveState)', function (data) { 7         $("#avtiveState").val(data.value); 8  }); 9 });

 1 //引用自https://www.cnblogs.com/matengfei123/p/9444095.html  2 layui.use('tree', function () {  3     var $ = layui.jquery, tree = layui.tree, form = layui.form;  4     var trees = [{ name: "請選擇", id: 0 }];  5     Array.prototype.push.apply(trees, JSON.parse($("#hidTree").val()));  6  tree({  7         elem: "#classtree",  8         skin: "no-icon",  9  nodes: trees, 10         click: function (node) { 11             var $select = $($(this)[0].elem).parents(".layui-form-select"); 12             $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='category']").val(node.id); 13  } 14  }); 15     $(".downpanel").on("click", ".layui-select-title", function (e) { 16         $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected"); 17         $(this).parents(".downpanel").toggleClass("layui-form-selected"); 18  layui.stope(e); 19     }).on("click", "dl i", function (e) { 20  layui.stope(e); 21  }); 22     $(document).on("click", function (e) { 23         $(".layui-form-select").removeClass("layui-form-selected"); 24  }); 25 });

經過簡單查看緣由，感受能解決，並且應該不難，因而有了下面這段代碼：

 1 layui.use('form', function () {  2     var $ = layui.jquery, form = layui.form;  3     //衝突，這段沒做用
 4     //form.on('select(supplier)', function (data) {
 5     // $("#supplier").val(data.value);
 6     //});
 7     //form.on('select(avtiveState)', function (data) {
 8     // $("#avtiveState").val(data.value);
 9     //});
10     $("#supplier,#avtiveState").parent().on("click", ".layui-form-select", function () { 11         var ths = $(this); 12         setTimeout(function () { 13             ths.addClass("layui-form-selected"); 14         }, 100);//必須timeout延遲，否則會被框架覆蓋賦值
15  }); 16     $("#supplier,#avtiveState").parent().on("mouseup",".layui-form-select", function () { 17         var ths = $(this); 18         setTimeout(function () { 19             ths.prev().val(ths.find("dl dd.layui-this").attr("lay-value")); 20         }, 100);//必須timeout延遲，layui.select是異步賦值
21  }); 22 });

解決！頁面上全部功能能用無誤！

（由於我這裏是列表頁，使用得比較淺，預估詳情頁上要使用tree，將會和form發生更難解決的衝突，不建議繼續用tree，不過也請求解決了這個問題的大佬發一發隨筆，幫幫你們！）

 

-------------------------

感謝博客園給我經過了開通博客申請！

我開通博客主要是爲了記錄開發中遇到的問題與解決辦法，這篇衝突問題今日遇到了，便快馬加鞭來發了第一個隨筆。

之後，還請你們多多關照！