layui的tree和form同时引用出现冲突的粗略解决办法_html-js-css

概述先来看看最终效果：如图中所示，这里用到了无限级的类目（tree实现）和产品状态（select实现）。其中，无限级tree是使用了这哥们的办法： layui实现下拉分类多级 https://www.cnblogs.com/matengfei123/p/9444095.html 他在文章最后提到“vue和layui的form表单冲突,去除layui的form即可”，当时就想，他vue和我纯l

先来看看最终效果：

如图中所示，这里用到了无限级的类目（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",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 });