欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-30 20:28:13
先来看看最终效果: 如图中所示,这里用到了无限级的类目(tree实现)和产品状态(select实现)。 其中,无限级tree是使用了这哥们的办法: layui实现下拉分类多级 https://www.cnblogs.com/matengfei123/p/9444095.html 他在文章最后提到“v ......

先来看看最终效果:

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

 

如图中所示,这里用到了无限级的类目(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,不过也请求解决了这个问题的大佬发一发随笔,帮帮大家!)

 

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

感谢博客园给我通过了开通博客申请!

我开通博客主要是为了记录开发中遇到的问题与解决办法,这篇冲突问题今日遇到了,便马不停蹄来发了第一个随笔。

以后,还请大家多多关照!