layui 数据与穿梭框

最新推荐文章于 2023-06-27 00:34:53 发布
最新推荐文章于 2023-06-27 00:34:53 发布
阅读量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
    评论
layui-表格穿梭-transferTable-源码
10-16
基于layui框架的前端表格穿梭框组件，项目中直接导入，复制demo源码就能使用，开发方便，样式美观
layui-表格穿梭-transferTable
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
layui穿梭框动态查询、添加、删除基于ssm(layui.transfer)
m0_46629316的博客
05-18 1118
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 穿梭框展示数据操作
小寒风的
01-07 3036
上代码 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 数据表格 ——后台数据获取
热门推荐
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实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
layUI穿梭框获取穿梭值（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-26 1583
<!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框架学习（28：穿梭框模块）
gc_2299的博客
06-27 1710
学习并记录layui框架中内置模块的穿梭框模块的函数、参数设置方式。
穿梭框
wrz1761616385的博客
09-09 305
首先还是建立一个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 5422
动态显示穿梭框内容 并加了一个新的div进行存储添加的内容 效果 问题 1.transfer无法渲染的问题 已解决 transfer初始化 1.忘记引入css文件 2.后台数据必须要有 value 和title这两个参数 ，否则解析的数据条数一致但是只会显示undefined ，建议传值的时候，将 id改成value，将需要显示的值拼接并改成title 2.动态添加标签，事件不触...
基于layui实现树形穿梭框
03-18
基于layui封装的多选树形穿梭框，双列表互选框
layui 穿梭框transfer右侧数据赋值排序错乱小技巧.doc
05-28
layui 穿梭框transfer右侧数据赋值排序错乱小技巧 在本文中，我们将讨论一个 layui 框架中的小技巧，该技巧可以解决穿梭框transfer右侧数据赋值排序错乱的问题。 layui 是一个基于JavaScript的前端UI框架，提供了...
layui 穿梭框 layui.transfer
jinggaoniao的博客
08-04 1万+
本文是自己对layui.transfer 穿梭框的基本使用总结，未涉及到的内容可以在layui.transfer官方文档中查找。下图为穿梭框的基本样式，效果还是不错的，能够满足系统中多种场景下的需求，它可以进行数据的交互筛选。 1、基础效果实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穿梭框组件</title> <link rel
layui_穿梭框组件（transfer）
m0_46699799的博客
06-30 8394
穿梭框组件（transfer）组件介绍组件举例基础效果代码效果定义标题及数据源代码效果初始右侧数据集合代码效果显示搜索框代码效果穿梭时的回调代码效果注意事项 组件介绍 这篇博客素材的由来是我在玩一个小游戏的时候，它的原理很像穿梭框，而且我觉得在开发中，穿梭框还挺有用的，于是我就去找了layui官网的文档来学习，并且将它分享出来 模块加载名称：transfer 基础的参数： 基础方法： 方法 含义 transfer.set(options); 设定全局默认参数。options 即各项基础参数
Layui_穿梭框
FortyPigs的博客
09-03 3174
1:render 渲染 2:首先在hubilder里新建一个web项目，其次再建一个文件夹把相关html里的代码复制粘贴到里边，命名为transfer_stu.html;相关代码如下： < !DOCTYPE html> < html> < head> < meta charset=“utf-8”> < title>穿梭框组件 < l...
layUI穿梭框前后端的交互
qq_41757790的博客
02-25 1116
layUI穿梭框的使用
layui穿梭框和layui表格数据交互
weixin_44493970的博客
10-31 5572
体检疾患查询 <style> /*树形菜单--分割线内文字*/ .diseasea{ position: relative; left:180px; /*右*/ color: #005cbf } /*表单信息-...
动态获取穿梭框内的数据
weixin_45045428的博客
09-04 2565
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form-stu</title> <link rel="stylesheet" href="layui/css/layui.css" type="...
1719378276792.jpg
最新发布
06-26
1719378276792.jpg
layui树形穿梭框
09-06
Layui没有原生提供树形穿梭框的组件，但是你可以结合 Layui 的树形菜单和穿梭框组件来实现类似的功能。 首先，你可以使用 Layui 的树形菜单组件构建树形结构。通过调用 `tree.render` 方法，你可以将数据渲染成树形菜单。例如： ```javascript var treeData = [ { title: '节点1', id: 1, children: [ { title: '子节点1', id: 11 }, { title: '子节点2', id: 12 } ] }, { title: '节点2', id: 2, children: [ { title: '子节点3', id: 13 }, { title: '子节点4', id: 14 } ] } ]; layui.tree({ elem: '#treeContainer', data: treeData, click: function(node) { // 树形菜单节点点击事件 console.log(node); // 输出点击的节点数据 } }); ``` 接下来，你可以使用 Layui 的穿梭框组件构建穿梭框。通过调用 `transfer.render` 方法，你可以将数据渲染成穿梭框。例如： ```javascript var transferData = [ { value: 1, title: '节点1' }, { value: 2, title: '节点2' }, { value: 3, title: '节点3' }, { value: 4, title: '节点4' } ]; layui.transfer({ elem: '#transferContainer', data: transferData, id: 'transfer', // 必须指定唯一的 ID title: ['可选项', '已选项'], // 设置穿梭框的标题 showSearch: true, // 显示搜索框 width: 'auto', // 设置宽度 height: 'auto', // 设置高度 text: { none: '无数据', // 没有数据时的提示文本 searchNone: '无匹配数据' // 搜索无匹配数据时的提示文本 } }); ``` 最后，你可以监听树形菜单的点击事件，在事件处理函数中获取点击的节点数据，并将节点数据添加到穿梭框中。例如： ```javascript layui.tree({ elem: '#treeContainer', data: treeData, click: function(node) { // 树形菜单节点点击事件 layui.transferAdd('transfer', [node]); // 将点击的节点添加到穿梭框中 } }); ``` 这样，你就可以实现类似于树形穿梭框的效果了。记得在 HTML 中添加对应的容器元素，如 `<div id="treeContainer"></div>` 和 `<div id="transferContainer"></div>`。 希望这些信息对你有帮助！如有更多问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值