layui的穿梭框绑定实时数据并使用

为layui穿梭框绑定实时数据的方法有很多，我这里的只是其中一个比较简单的为layui绑定实时数据的方法。 为穿梭框绑定实时肯定是先要使用到layui的穿梭框，
使用layui穿梭框的第一步，正常情况下肯定是先要加载穿梭框的模块 transfer，但如果想要实时数据绑定在穿梭框在初始化之前还需要用post请求将所需要的数据查询出来，在对layui进行加载。

在将所需要的数据查询出来并将所需要的layui模块进行加载后，就可以为想要的元素绑定穿梭框了。初始化具体如下：先设置一个盒子用于绑定穿梭框

然后再为所设置的盒子绑定并初始化穿梭框

需要注意因为transfer模块配置的参数中没有异步提交的参数，并且只有一个title 标题名称，所以如果想要标题显示多个数据就需要将多个数据拼接在一起，且如果想要穿梭框中的数据更新就需要用到同步刷新才可以更新数据。正常情况下如果是设置固定的数据，数据源的格式解析部分是可以去掉的，设置数据源的格式解析是因为我们所返回的数据的根式可能不符合规范，所以为了防止这种情况需要给返回的数据设置格式，使返回的数据的格式全部变成符合的规范的格式。详细的参数可以上layui的使用文档中查找，同时文档上也有穿梭框的使用教程。上面代码实现的效果如下

如果设置的数据的宽高超出了对穿梭框设置的宽高会自动出现局部的横向或者竖向滚动条。开启搜索框后再搜索框中输入内容如果数据中有相应的关键字会自动帮你查询出来，如果没有则会显示你所设置的文本。

穿梭框的右侧数据通常被认为是选中数据，如果想要获取到右侧的数据可以同过所设置的标识符来获取数据。

获取到的数据格式如下

Value 绑定的是返回的数据的ID，而title 则是返回的数据中条文本数据拼接在一起的标题文本。