layui 穿梭框transfer组件 数据data用ajax来获取

简介: layui 穿梭框transfer组件 数据data用ajax来获取

为layui穿梭框绑定实时数据的方法有很多,我这里的只是其中一个比较简单的为layui绑定实时数据的方法。 为穿梭框绑定实时肯定是先要使用到layui的穿梭框, 使用layui穿梭框的第一步,正常情况下肯定是先要加载穿梭框的模块 transfer,但如果想要实时数据绑定在穿梭框在初始化之前还需要用post请求将所需要的数据查询出来,在对layui进行加载。 在将所需要的数据查询出来并将所需要的layui模块进行加载后,就可以为想要的元素绑定穿梭框了。初始化具体如下:先设置一个盒子用于绑定穿梭框 然后再为所设置的盒子绑定并初始化穿梭框 需要注意因为transfer模块配置的参数中没有异步提交的参数,并且只有一个title 标题名称,所以如果想要标题显示多个数据就需要将多个数据拼接在一起,且如果想要穿梭框中的数据更新就需要用到同步刷新才可以更新数据。
// 频道号-穿梭框组件
getChannelIds();
function getChannelIds() {
/ 启动加载... /
var indexload = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.ajax({
url:"{:url('manual_execution')}",
type: 'post', // 或者POST,根据你的接口要求
dataType: 'json', // 假设返回的数据格式是JSON
data: {action:"channelIdArr"},
success: function(res){
layer.close(indexload);/ 关闭加载弹层... /
transfer.render({
elem: '#ID-transfer-demo'
,data: res
,showSearch: true
});
}
});
}


var channelValues = transfer.getData('transfer').map(function(item) {
return item.value;
});
    var channelValuesString = channelValues.join(',');
目录
相关文章
|
6月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
143 0
|
6月前
|
前端开发 Java
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
|
6月前
|
前端开发 Java
layui结合ajax实现下拉菜单联动效果
layui结合ajax实现下拉菜单联动效果
|
1月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
|
1月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
|
6月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
6月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
77 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
5月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20
|
5月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
45 0