layui 数据与穿梭框

最新推荐文章于 2024-04-18 16:55:59 发布
最新推荐文章于 2024-04-18 16:55:59 发布
阅读量6.9k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33354934/article/details/100544147
版权

1.谷歌浏览器控制台  F12

2.$post 请求数据

$.post(url, {
                    token: globalData.myToken
                },
                function(result) {
                    //不清楚数据结构，所以打印到控制台   
                    console.log(result);

}

}

}）

3.请求数据后，把数据渲染到穿梭框

    transfer.render({
                        elem:'#test1',
                        data:result,
                        id:'demo1',
                        parseData: function(res) {
                            //根据返回数据格式进行解析

                            return {
                                "value":res.Id//数据值
                                    ,
                                "title":res.Name //数据标题
                                    ,
                                "disabled": res.disabled //是否禁用
                                    ,
                                "checked": res.checked //是否选中
                            }

                        }

                    })                    

 

4.单词 transfer 转移 global 全部的

5.数据和穿梭框连接代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
        <script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
        <script src="layui/global.js" type="text/javascript" charset="UTF-8"></script>
    </head>

    <body>
        <div id="test1"></div>
        <script>
            layui.use(['transfer'], function() {
            let transfer = layui.transfer;
            let $ = layui.$;
            let url =globalData.server+"/GetRolesAll"
            $.post(url, {
                    token: globalData.myToken
                },
                function(result) {
                    //不清楚数据结构，所以打印到控制台   
                    console.log(result);
                    //穿梭框渲染返回的数据
                    transfer.render({
                        elem:'#test1',
                        data:result,
                        id:'demo1',
                        parseData: function(res) {
                            //根据返回数据格式进行解析

                            return {
                                "value":res.Id//数据值
                                    ,
                                "title":res.Name //数据标题
                                    ,
                                "disabled": res.disabled //是否禁用
                                    ,
                                "checked": res.checked //是否选中
                            }

                        }

                    })                    
                },
                "json")
            })
        </script>
    </body>

</html>

6.global.js文件代码

var  globalData = {
                         server:"http://stuapi.ysd3g.com/api/",
                         myToken:"443c475a-70e8-4b9a-a88c-c608832f7607",
};

7.获取token网址

stuapi.ysd3g.com

 

阿shun
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态获取穿梭框内的数据
weixin_45045428的博客
09-04 2568
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form-stu</title> <link rel="stylesheet" href="layui/css/layui.css" type="...
layui-表格穿梭-transferTable
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
layui-表格穿梭-transferTable-源码
10-16
基于layui框架的前端表格穿梭框组件，项目中直接导入，复制demo源码就能使用，开发方便，样式美观
vue3 + Element-Plus的transfer穿梭框组件数据量大卡顿解决方案
最新发布
weixin_57145577的博客
04-18 1144
使用vue3 + Element-Plus使用transfer, 数据量2000左右页面渲染会卡顿6-8s,非常影响用户体验初步排查卡顿是由于大量dom元素渲染引起的页面卡顿,所以思路是修改element-plus源码,减少首次dom渲染数量.下载element-plus源码, 在里面找到transfer组件引入到项目中 1.element-plus源码地址:https://github.com/element-plus/element-plus 2.transfer文件地址:element-plus/
layui 穿梭框展示数据操作
小寒风的
01-07 3048
上代码 HTML代码 id 为test7 的 <div class="layui-btn-container"> <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button> <button type="button" class="layui-btn" lay-de
layui穿梭框动态查询、添加、删除基于ssm(layui.transfer)
m0_46629316的博客
05-18 1124
layui穿梭框动态查询、添加、删除基于ssm(layui.transfer) 一、前端代码 1.定义角色的弹层页面 <!--角色的弹层页面 --> <div id="editRoleLayer" style="display: none; margin-top: 20px;"> <form class="layui-form" lay-filter="editRoleForm" id="editRoleForm" action=""> <div id=
layui 数据表格 ——后台数据获取
热门推荐
Big Data
06-11 1万+
jsp或html <table id="userList" lay-filter="userList"></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 9...
layUI穿梭框获取穿梭值（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-26 1597
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layUI穿梭框</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport
Layui_穿梭框
FortyPigs的博客
09-03 3182
1:render 渲染 2:首先在hubilder里新建一个web项目，其次再建一个文件夹把相关html里的代码复制粘贴到里边，命名为transfer_stu.html;相关代码如下： < !DOCTYPE html> < html> < head> < meta charset=“utf-8”> < title>穿梭框组件 < l...
layUI穿梭框前后端的交互
qq_41757790的博客
02-25 1124
layUI穿梭框的使用
layui 穿梭框transfer右侧数据赋值排序错乱小技巧.doc
05-28
一个简单的没有技术含量的方法
ztree带层级穿梭框
06-29
ztree带层级穿梭框，可以左右移动，可以去除重复的数据
基于layui实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
vue+element-ui实现穿梭框数据自定义排序
12-05
vue+element-ui实现穿梭框数据自定义排序 实现了穿梭框右侧数据自定义排序的功能
穿梭框
wrz1761616385的博客
09-09 307
首先还是建立一个HTML文件，复制官网上上的HTML代码，并把需要的修改。 把需要的global.js拉入文件中。global.js内容如下： var globalData = { server:“http://stuapi.ysd3g.com/api/”, //数据接口服务器端地址 myToken:“0acd0449-1b76-4085-895e-7577f802770e”, //自己的数据to...
layui transfer 遇到的相关问题
gw4364934的博客
03-18 5429
动态显示穿梭框内容 并加了一个新的div进行存储添加的内容 效果 问题 1.transfer无法渲染的问题 已解决 transfer初始化 1.忘记引入css文件 2.后台数据必须要有 value 和title这两个参数 ，否则解析的数据条数一致但是只会显示undefined ，建议传值的时候，将 id改成value，将需要显示的值拼接并改成title 2.动态添加标签，事件不触...
layui框架学习（28：穿梭框模块）
gc_2299的博客
06-27 1758
学习并记录layui框架中内置模块的穿梭框模块的函数、参数设置方式。
layui后台管理系统 - 权限树表格
weixin_43345943的博客
07-27 2678
layui后台管理系统 - 权限树表格 先上截图： 采用的是layui -tree 插件 : 演示地址：https://whvse.gitee.io/treetable-lay/ 项目地址： https://gitee.com/whvse/treetable-lay 后端： @GetMapping("/permissionList") @ResponseBody public ...
ThinkPHP5 集成使用 Layui 穿梭框（transfer）控件
u011415782的专栏
03-31 1226
最近在做后台业务处理时，接触到了 Layui 中的一个穿梭框 transfer 控件的使用；个人觉得效果还是挺满意的； 但是毕竟是在 ThinkPHP5 框架下进行的集成，不能不适合部分同行理解哦 不过，还是在此进行整理一番，欢迎指摘 … 框架： ThinkPHP5.1.2 系统： Nginx/centOS 浏览器：Google
layui树形穿梭框
09-06
Layui没有原生提供树形穿梭框的组件，但是你可以结合 Layui 的树形菜单和穿梭框组件来实现类似的功能。 首先，你可以使用 Layui 的树形菜单组件构建树形结构。通过调用 `tree.render` 方法，你可以将数据渲染成树形...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值