layui多选下拉组件selectM.js 选择后触发事件等问题的解决

2021-09-06 15:39 栏目:技术开发 查看(8469)

最近做了一个简单项目,后台用layui快速构建前端,其中有一个分类多选的场景。也就是一级分类和二级分类多可以多选,基本业务流程是:用户可以选择一个或多个一级分类,没选择分类后,系统请求对应的二级分类数据,重新在前台渲染二级分类的数据。

QQ截图20210906125949

其实在以前的项目,使用过其他的库实现这样的流程。但是因为这个使用layui,而笔者本人对代码是有强迫症的,尽量减少重复的东西。所以尽量直接用layui来实现,但通过查看手册和看它代码,并没有直接提供这一功能。然后在layui官网搜索第三方库,发现了几个,其中有一个叫做selectM.js的相对来说比较简单,刚好符合这个场景,而且默认ui风格完全跟layui保持一致;只有不到10kb。下面是作者提供的参数文档:

QQ截图20210906151137

看上去貌似使用起来没什么问题,但是实际上使用的时候还是发现了一些小“坑”,这里分享一下供大家参考,可能有更加优雅的方式完成,主要是两个问题:

一、点击选中或取消选中下拉选项后,回调问题。

文档中提供了一个filter的配置参数,里面也说明了的作用跟layui的lay-filter一致,也就是绑定一个触发的事件函数。然而实际上并没有效果,阅读其源代码发现并没有这个参数出现。不清楚是作者是不是上传错代码版本了;或者可能是作者先写好了文档,开始是想做完整多级多选联动选择的逻辑的,后面可能太忙没做完;里面似乎也没有这个回调。解决办法是:在setSelected方法的最后,添加回调代码逻辑,如:

if(typeof this.config.callback=='function'){this.config.callback(values)};

然后在调用的时候,添加callback参数进行回调,回调的值其实就是源码中的values,values就包括当前选择的选项等数据信息。调用代码如下:

var catid = selectM({
    elem: '#catid'
   ,data: d.data
   ,max:6
   ,width:400
   ,verify:'required'
   ,callback:function (values) {
      /*回调逻辑*/
  }
});

这样就可以实现选择或取消选择选项后,进行回调,重新加载新的二级分类数据了。然而这个时候又发现了两个一个问题,下面将会分析这个问题。

二、库本身仅提供了初始化已选选项的API,但没有提供下拉框所有数据重载。

虽然文档表格中没有体现,但通过其源代码可以看到实际上提供了一个obj.set的方法,用于初始化已选选项,这个可以用于在编辑内容的时候,默认勾选上次保存的选项信息。然而,重新渲染二级下拉框数据的方法貌似并没有提供。于是手写网络请求代码实现,但是出现一个问题,就是偶次数渲染的时候,二级分类下拉框点击没有任何反应。

期间尝试过多种方式,包括粗暴地修改源码中的$E.on方法里面的逻辑,事实也是可以的,然而既然都用了库了,做这么大的改动就有点本末倒置了。所以用了一种相对来说更加优雅一点的方式,首先在二级分类实例化本库前定义一个全局变量比如catid2,然后在实例化前做判断,如果catid2已经实例化存在一个对象,则进行重载。

/*全局变量*/
var catid2='';
/*如果已经存在,也就是重载数据的时候会执行这段代码,重载数据。
其中render可以参考库的源代码,其实更layui一样的;
在使用layui的很多时候也需要用render重载数据。*/
if(catid2) catid2.render();
/*开始创建实例*/
catid2 = selectM({ 
    elem: '#catid2' 
    ,data: d.data 
    ,max:6 
    ,width:400 
    ,verify:'required' 
    ,callback:function (values) { 
       /*回调逻辑*/ 
    } 
});

这样基本就可以解决数据重载问题。

至此,可以用selectM.js 完整实现该场景的所有功能。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:layui多选下拉组件selectM.js 选择后触发事件等问题的解决 - 微构网络
分享: