layui的tree和form同时引用出现冲突的粗略解决办法
程序员文章站
2022-04-30 20:28:13
先来看看最终效果: 如图中所示,这里用到了无限级的类目(tree实现)和产品状态(select实现)。 其中,无限级tree是使用了这哥们的办法: layui实现下拉分类多级 https://www.cnblogs.com/matengfei123/p/9444095.html 他在文章最后提到“v ......
先来看看最终效果:
如图中所示,这里用到了无限级的类目(tree实现)和产品状态(select实现)。
其中,无限级tree是使用了这哥们的办法:
layui实现下拉分类多级
他在文章最后提到“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,不过也请求解决了这个问题的大佬发一发随笔,帮帮大家!)
-------------------------
感谢博客园给我通过了开通博客申请!
我开通博客主要是为了记录开发中遇到的问题与解决办法,这篇冲突问题今日遇到了,便马不停蹄来发了第一个随笔。
以后,还请大家多多关照!