layui传梭框怎么使用
1、先引入layui.js,绑定html在render,如果你是引入的是latui.all.js则直接使用,不需要use,如图中所示。
2、穿梭框分左右数据,先说数据配置,在绑定id的前提下,看一下data属性,左侧数据源,lay这个传梭框对数据有格式要求必须是图中格式(属性不止这些),这点不是很好,但是好在有一个p锾攒揉敫aresData对数据源进行解析。
3、paresData数据源解析,什么意思呢,就是当你的数据不符合他要求的value:'',title:''这种格式的时候你可以在paresData中进行解析,如图
4、再看value右侧数据也是选择||存在的数据:这个数据就没有的解析的了,这是一个数组,数组的元素是数据源中的value值。
5、看一下效果是什么样子的,可以看到,如果value中出现了data中已存在的数据,则左侧就不会显示出来。
6、最后一个重要的属性,onchange回调函数:在选中数据后点击中间的穿梭按钮时触发,该函数有两个参数第一个是寝忍灬娱穿梭的数据data,一个是穿梭索引index,index==0时是左边数据到右边,==1时是右边数据到左边,所以这里可以做交互。
7、onchange触发数据交互:真正使用的时候是会用到数据交互的,往往都是在这里发生,如图所示,一个左到右侧添加数据,一个右侧到左侧删减数据
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:68
阅读量:77
阅读量:52
阅读量:86
阅读量:85