基于layui的穿梭树

最新推荐文章于 2024-04-21 13:35:43 发布
VIP文章 最新推荐文章于 2024-04-21 13:35:43 发布
阅读量1.7k 收藏 6
点赞数 1
分类专栏： layUI 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcxia89/article/details/120060617
版权

git地址：https://gitee.com/dcaix/tree-transfer

2级穿梭树

介绍

基于layui的穿梭树

layui有 layui.tree、layui.transfer，但是没有 2 级树穿梭。网上找了一大圈都没顺手的组件，无奈要兼容到 ie8，自己干吧。此组件完全基于layui.tree进行封装，需求有 2 级 ，未递归做全树穿梭

author 

最低0.47元/天 解锁文章
dcaix89
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
基于layui实现树形穿梭框
03-18
基于layui封装的多选树形穿梭框，双列表互选框
layui树形结构
romanstatic的博客
12-13 7568
最近接触Layui框架，感觉还不错，就总结一下在使用layui的树形结构的使用。        在官网上查看时发现关于layui的使用都是静态添加的代码，如果我想动态添加树形节点时遇到了很大的问题，官网的静态示例代码如下： layui.use(['tree', 'layer'], function(){ var layer = layui.layer ,$ = layui.jquery
树状图形式的穿梭框
热门推荐
前端技术
07-11 1万+
废话少说直接上代码<!doctype html><html><head><meta charset="utf-8"><title>jQuery轻量级树状菜单插件代码</title><link href="jquery.treemenu.css" rel="stylesheet&q
layui框架学习（28：穿梭框模块）
gc_2299的博客
06-27 1307
学习并记录layui框架中内置模块的穿梭框模块的函数、参数设置方式。
LayUi基础讲解
Past
12-28 1371
认识 Layui 一、介绍 layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。 官网：https://www.layui.com 二、下载安装 <link rel="stylesheet" href="./layui/css/layui.css" /> <script src="./layui/layui.js"></script> 三、模块 l
【工作笔记-20220222】layui的穿梭框和xm-select树状下拉框-----list格式数据转为树状结构数据
亚卿的博客
02-22 2083
文章目录工作任务说明一、穿梭框组件前端js部门代码1、这里的`data`的格式要求json格式2、`value`属性的值二、树状下拉框前端js代码1、这里写一下tree格式数据的生成2、tree中被选中的集合注意事项 今天的日期不错，比较特别。 工作任务说明 工作任务，是为项目的首页增加一个快捷访问的标签卡，同时增加一个添加快捷访问的添加功能。就比如一些app首页，添加“常用”的功能。 前端首页的HTML页面，已经由前端老哥完成，我就在其基础上进行一些修改。这里也只是介绍一下layui的穿梭框和xm-sel
layui 穿梭框
我的LOG
11-17 602
layui 穿梭框直接代码 直接代码 Java类 属性 nteger id; String name; String status; boolean checked; layui 穿梭框 js （从后台获得列表后展示） var checkeds=[]; for(var i=0;i<res.data.length;i++){ if(res.data[i].checked){checkeds.pu
使用layui实现树形结构的方法
01-21
树形结构在项目中使用是比较，下面我来介绍一种layui做树形结构的方法 树形结构需要获得的数据有父id，所以数据库需要有父id： 后台代码： @RequestMapping(value = /lists) public void getList( HttpServletResponse response) { List list = this.companyService.getList(); String[] exclude={Groups}; JsonUtils.printJsonStringFromArrayObjectWithExclude(response, list,
基于layui实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
基于layui的树表格-treeGrid
08-23
基于layui的树表格-treeGrid
LayUi之树形结构的详解（附有全案例代码）
m0_74315688的博客
07-12 2477
怎么灵活的使用LayUi?怎么用LayUi完成树形结构中的数据交互？一篇全部解决，手把手教学！！
el-tree 穿梭树
北寻北爱
07-08 251
穿梭树，element中el-tree组件实现穿梭框的效果
layui 穿梭框的实现
mangobot的博客
02-11 1138
layui.use(['form', 'layer', 'jquery', 'laydate', 'transfer'], function () { var $ = layui.jquery, transfer = layui.transfer; transfer.render({ elem: '#transfer', data: [], value: [], ...
基于Layui和eleTree的穿梭搜索树
kennyzjk的专栏
03-11 1881
请移步码云下载： https://gitee.com/zheng_jun_kai/shuttle_tree
使用layui table达到穿梭框效果
gw4364934的博客
04-02 4134
由于自己文章写得transfer过于操蛋，现在直接使用两个table来实现transfer的功能，与layui的穿梭框不同的是，里面的值虽然也是一一对应的，但是右侧框是可以显示左侧框没有的值。且也不会因为左侧框的值变化右侧框也跟着变化 <script th:inline="javascript"> // const index = parent.layer.getFrameIn...
layui穿梭框组件
userwang的博客
07-03 1923
目录前言基础参数左右穿梭的回调基础方法1.获得右侧数据2.实例重载 前言 本章给大家介绍的layui的穿梭框组件。 transfer 组件可以进行数据的交互筛选： 例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穿梭框组件</title> <link rel="stylesheet" href="../src/css/layui.css"
layui--table里使用switch
最新发布
Schaffer的博客
04-21 258
上面介绍了两种获取行数据的ID方式，但是都需要原生js去遍历table数据，对于前端操作可能影响加载。就可以获取行Id了。也就是将实现方式里面的。开关的动作，实现本列数据的状态切换！模板实现的，不同的在于模板代码。值绑定成行数据ID，这样可以利用。因为switch的开关状态由。上面渲染后的列表上面加一个。绑定数据改一下，例如改成。下面介绍的思路都是利用。
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>`。 希望这些信息对你有帮助！如有更多问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值