layui传梭框怎么使用

2025-04-25 19:52:06

1、先引入layui.js,绑定html在render,如果你是引入的是latui.all.js则直接使用,不需要use,如图中所示。

layui传梭框怎么使用
layui传梭框怎么使用

2、穿梭框分左右数据,先说数据配置,在绑定id的前提下,看一下data属性,左侧数据源,lay这个传梭框对数据有格式要求必须是图中格式(属性不止这些),这点不是很好,但是好在有一个p锾攒揉敫aresData对数据源进行解析。

layui传梭框怎么使用

3、paresData数据源解析,什么意思呢,就是当你的数据不符合他要求的value:'',title:''这种格式的时候你可以在paresData中进行解析,如图

layui传梭框怎么使用

4、再看value右侧数据也是选择||存在的数据:这个数据就没有的解析的了,这是一个数组,数组的元素是数据源中的value值。

layui传梭框怎么使用

5、看一下效果是什么样子的,可以看到,如果value中出现了data中已存在的数据,则左侧就不会显示出来。

layui传梭框怎么使用
layui传梭框怎么使用

6、最后一个重要的属性,onchange回调函数:在选中数据后点击中间的穿梭按钮时触发,该函数有两个参数第一个是寝忍灬娱穿梭的数据data,一个是穿梭索引index,index==0时是左边数据到右边,==1时是右边数据到左边,所以这里可以做交互。

layui传梭框怎么使用

7、onchange触发数据交互:真正使用的时候是会用到数据交互的,往往都是在这里发生,如图所示,一个左到右侧添加数据,一个右侧到左侧删减数据

layui传梭框怎么使用
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
相关推荐
  • 阅读量:68
  • 阅读量:77
  • 阅读量:52
  • 阅读量:86
  • 阅读量:85
  • 猜你喜欢