第一次写技术博文,请各位技术大侠多多指教!
先说下动机,在写测试小工具的时候(基于layui+springboot框架),要用到一个多选框组件,layui官网上研究了下合适的扩展组件,感觉xm-select比较符合,下面分享下用该组件遇到的那些1,2,3吧!
下载对应的JS
在layui官网扩展组件页面中,有多款网友分享的好用的扩展组件,可按最近和人气排序。找到xm-select,下载资源包,copy他的xmselect.js文件到自己工程中(对应目录下)
前端代码
加上简单的一行<div id="insurePlace" class="xm-select-demo"></div>就可
划重点:
script部分的那些坑
base后,填写xm-select的js文件放置的目录,写到目录文件名就可以,后面加个/
一开始我没有加extend,导致use中搜不到xmSelect方法,像我上面这样字体加粗显示就代表引用成功了,也可以在layui.xmSelect下按ctrl健查看引用了哪些
动态渲染多选组件(后端接口返回)
一开始,我把渲染多选放在ajax请求外面,把ajax返回值赋值给xmSelect.render方法中的data,怎么都渲染不成功
大家看到了,我把渲染多选框的方法放在ajax的返回成功的方法中,直接个data赋值res.data,结果 成功了!激动,嘻嘻
然后说下渲染多选框中的那些字段的解释
tree---就是英文单词树,多选内容呈树型,每个配置的含义就不展开了,大家可以去开发者的网页中查看https://maplemei.gitee.io/xm-select/#/plugin/tree
height--顾名思义就是高度,我看网上用的一般都是auto,但是如果你用了树形而且数据又贼多的时候,就不能用auto!!!!会贼长,把你整个页面都盖掉的那种,所以还是要自己设置一个高度,我用了500px,如果树形想做滚动条的,要自己设置高度!
name--多选控件选择完值后,扔给后端接口请求参数名称!
toolbar--工具条,可以自定义全选,清除,反选功能,蛮好用的,加上吧!
paging--不选树形结构的,用这个可以直接出分页效果
pageSize--直接设定每页几条,值可以为:10,15,20.。。。。自己喜欢即可
成果
我的多选框渲染的是省市,下面看看我最终的效果吧!