Antd的Transfer树穿梭框(支持搜索和全选)

置顶 已于 2023-05-30 11:31:46 修改
阅读量1.8k 收藏 19
点赞数 5
分类专栏： react 文章标签： javascript react.js Powered by 金山文档
于 2023-02-09 15:06:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49581008/article/details/128953065
版权

(1). 穿梭框左右侧均为省市树，支持搜索，支持全选

(2). 某城市从左侧移到右侧后，左侧为不可勾选状态。

(3). 移动省下部分城市，左右侧这个省都要作为父节点展示。

*提示：只有左侧一级下的二级为全选状态，一级才作为一项移到右侧，否则一级节点只作为父节点展示并不是输出项，如广西省二级只移了梧州市一项，所以广西省不算一项，右侧总共为5项。rightData = [广东省，广州市，深圳市，佛山市，梧州市]

*根据官方组件结合自己的数据业务场景修改，附上我的代码，供参考：

import React, { useState } from 'react'
import { Transfer, Tree } from 'antd'

const AuthorizationModal = () => {
    const [targetKeys, setTargetKeys] = useState([])
    const [rightTreeData, setRightTreeData] = useState([])
    const treeData = [
        { key: 0, title: '福建省' },
        {
            key: 1,
            title: '广东省',
            children: [
                { key: 10, title: '广州市' },
                { key: 11, title: '深圳市' },
                { key: 12, title: '佛山市' }
            ],
        },
        {
            key: 2,
            title: '广西省',
            children: [
                { key: 20, title: '梧州市' },
                { key: 21, title: '北海市' },
                { key: 22, title: '玉林市' }
            ],
        }
    ]
    const generateTree = (treeNodes = [], checkedKeys = []) =>
        treeNodes.map(({ children, ...props }) => ({
            ...props,
            disabled: checkedKeys.includes(props.key),
            children: generateTree(children, checkedKeys),
        }))

    const dealCheckboxSeleted = ({ node, onItemSelect, onItemSelectAll }, direction) => {
        let {
            checked,
            halfCheckedKeys,
            node: { key, children },
        } = node
        // 勾选的是父节点
        if (children?.length > 0) {
            let keys = []
            let temp = []
            if (direction === 'left') {
                let state = false
                if (rightTreeData.length > 0) {
                    rightTreeData?.map(item => {
                        if (item.childCompanies?.length > 0 && (item.key == key)) {
                            temp = childCompanies.filter(v => !item.childCompanies.some((t => t.key === v.key)))
                            temp?.forEach(child => {
                                keys.push(child.key)
                            })
                        } else {
                            state = true
                        }
                    })
                } else {
                    state = true
                }
                if (state) {
                    children?.forEach(child => {
                        keys.push(child.key)
                    })
                }
                onItemSelectAll([...keys, key], checked)
            }
            if (direction === 'right') {
                children?.forEach(child => {
                    keys.push(child.key)
                })
                onItemSelectAll([...keys], checked)
            }
        } else {
            // 勾选的是子节点
            if (!checked) {
                // 查找该元素的父元素
                let parentKeys = []
                parentKeys = [halfCheckedKeys?.[0]] || []
                if (parentKeys[0] == undefined) {
                    // 当一级下的二级全部取消勾选，一级也取消勾选
                    treeData.forEach(tree => {
                        if (tree.children) {
                            tree.children?.forEach(child => {
                                if (child?.key === key) {
                                    parentKeys.push(tree?.key)
                                }
                            })
                        }
                    })
                }
                onItemSelectAll([...parentKeys, key], checked)
            } else {
                let parentKey = ''
                treeData.forEach(tree => {
                    if (tree?.children) {
                        tree.children?.forEach(child => {
                            if (child?.key === key) {
                                parentKey = tree?.key
                            }
                        })
                    }
                })

                if (!halfCheckedKeys?.includes(parentKey) && parentKey != '') {
                    onItemSelectAll([key, parentKey], checked)
                } else {
                    onItemSelect(key, checked)
                }
            }
        }
    }

    const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
        const transferDataSource = []
        const dataSourceData = dataSource
        let test = [...rightTreeData]
        function flatten(list = []) {
            list.forEach(item => {
                transferDataSource.push(item)
                flatten(item.children)
            })
        }
        flatten(dataSource)

        return (
            <Transfer
                {...restProps}
                targetKeys={targetKeys}
                dataSource={transferDataSource}
                className="tree-transfer"
                showSearch
                showSelectAll={true}
                render={item => item.title}
                rowKey={record => record.key}
                // 搜索功能逻辑
                onSearch={(dir, val) => {
                    let data = (dir === 'left' ? dataSourceData : rightTreeData)
                    // 1.先遍历二级，过滤出搜索对应的数据；
                    // 2.如果二级有数据，过滤出二级的companyName和一级的companyName
                    // 3.最后把一级不符合搜索对应的值过滤
                    const newDeptList = data?.map(item => {
                        item = Object.assign({}, item)
                        if (item.children) {
                            item.children = item.children?.filter(res => (res.title.indexOf(val) > -1))
                        }
                        return item
                    }).filter(item => {
                        if (item.children?.length > 0 || val.length == 0) {
                            item = Object.assign({}, item)
                            item.children?.filter(e => (
                                e.title.indexOf(val) > -1 ? '' : item.title.indexOf(val) > -1
                            ))
                        } else {
                            item = item.title.indexOf(val) > -1
                        }
                        return item
                    })
                    console.log(newDeptList, 165);
                    if (dir === 'left') {
                        dataSource = newDeptList
                    }
                    if (dir === 'right') {
                        test = newDeptList
                    }
                }}
            >
                {({ direction, onItemSelect, onItemSelectAll, selectedKeys }) => {
                    if (direction === 'left') {
                        const checkedKeys = [...selectedKeys, ...targetKeys]
                        return (
                            <Tree
                                blockNode
                                checkable
                                defaultExpandAll
                                checkedKeys={checkedKeys}
                                treeData={generateTree(dataSource, targetKeys)}
                                fieldNames={{ title: 'title', key: 'key', children: 'children' }}
                                onCheck={(_, node) => {
                                    dealCheckboxSeleted({ node, onItemSelect, onItemSelectAll }, direction)
                                }}
                                onSelect={(_, node) => {
                                    dealCheckboxSeleted({ node, onItemSelect, onItemSelectAll }, direction)
                                }}
                            />
                        )
                    }
                    if (direction === 'right') {
                        const checkedKeys = [...selectedKeys]
                        return (
                            <Tree
                                blockNode
                                checkable
                                defaultExpandAll
                                checkedKeys={checkedKeys}
                                treeData={test}
                                fieldNames={{ title: 'title', key: 'key', children: 'children' }}
                                onCheck={(_, node) => {
                                    dealCheckboxSeleted({ node, onItemSelect, onItemSelectAll }, direction)
                                }}
                                onSelect={(_, node) => {
                                    dealCheckboxSeleted({ node, onItemSelect, onItemSelectAll }, direction)
                                }}
                            />
                        )
                    }
                }}
            </Transfer>
        )
    }

    /**
     * 改变右边tree数据
     * @param {*右边tree需要处理的keys集合} keys 
     * @param {*0-删除以上的keys 1-新增以上的keys} type
     */
    const getRightTreeData = (keys, type) => {
        let arr = [...rightTreeData]
        if (keys?.length > 0) {
            keys.forEach(key => {
                treeData.forEach(data => {
                    if (key === data.key) {
                        // 勾选的是父节点,查看右侧是否有勾选对象
                        let index = arr.findIndex(i => {
                            return i.key === key
                        })
                        if (type === 1) {
                            if (index === -1) {
                                arr.push(data)
                            } else if (index > -1 && arr?.[index]?.children?.length < data?.children?.length) {
                                // 先选择子项再勾选该父级时，传过来的keys是 ['0-1-0','0-1'],此时第一次循环已经将该父级放到arr中，
                                // 再遍历0-1时，需要先删除再将全部的children复制
                                arr.splice(index, 1)
                                arr.push(data)
                            }
                        } else if (type === 0) {
                            if (index > -1) {
                                arr.splice(index, 1)
                            }
                        }
                    } else {
                        // 勾选的是子节点
                        // 左侧数据处理
                        let selectedParentKey = '' //选定的父项id
                        let selectedObj = {}       //选定对象
                        if (data?.children?.length > 0) {
                            data.children.forEach(child => {
                                if (key === child.key) {
                                    selectedParentKey = data.key
                                    selectedObj = child
                                }
                            })
                        }
                        // 右侧数据处理
                        if (Object.keys(selectedObj)?.length > 0) {
                            let newData = {}
                            // 查看右侧是否有选中子项的父项
                            let index = arr.findIndex(item => {
                                return item.key === selectedParentKey
                            })
                            if (index > -1) {
                                // 右侧已有选中子项的父项，selectedIndex查看右侧子项是否有勾选对象
                                let oldChildArr = [...arr[index].children]
                                let selectedIndex = oldChildArr?.findIndex(o => {
                                    return o.key === selectedObj.key
                                })
                                if (selectedIndex === -1 && type === 1) {
                                    arr[index].children.push(selectedObj)
                                }
                                if (selectedIndex > -1 && type === 0) {
                                    arr[index].children.splice(selectedIndex, 1)
                                    if (arr[index].children?.length === 0) {
                                        arr.splice(index, 1)
                                    }
                                }
                            } else {
                                // 右侧没有选中子项的父项
                                if (type === 1) {
                                    newData = { ...data }
                                    newData.children = []
                                    newData.children.push(selectedObj)
                                    arr.push(newData)
                                } else if (type === 0) {
                                    arr = []
                                }
                            }
                        }
                    }
                })
            })
            setRightTreeData(arr)
        }
    }

    // 左右移动按钮
    const onChange = (keys, direction, moveKeys) => {
        let changeArrType = 1 // 0-删除  1-新增
        if (direction == 'left') {
            changeArrType = 0
            if (keys.length > 0) {
                treeData.forEach(item => {
                    let index = keys.indexOf(item.key)
                    if (index > -1 && item.children?.length > 0) {
                        item.children?.forEach(v => {
                            if (moveKeys.includes(v.key)) {
                                keys.splice(index, 1)
                            }
                        })
                    }
                })
            }
        }
        setTargetKeys(keys)
        let keysList = changeArrType === 1 ? keys : moveKeys
        getRightTreeData(keysList, changeArrType)
    };

    return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />
}

export default AuthorizationModal
可达大力鹅
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与后台进行关联实现菜单、用户等权限，若需要，则需进行二次开发。 访问链接：https://blog.csdn.net/weixin_48357332/article/details/124860395
ant design vue ＜a-transfer＞简单穿梭框实现
qq_46423858的博客
02-17 1292
简单穿梭框
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
antd 开发框架包
10-19
antd 开发框架包 1组件化&;antd将UI分成不同的组件,每个组件都独立封装缺陷下面这些都没有:事件系统(除了原生的DOM事件)AJAX功能数据层Promises应用程序架构单单reactjs的代码压缩后也需要147k以上reactjs代码量最多,因为它既要管理UI逻辑,又要操心dom的渲染不兼容IE8优点总结使用reactjs容易实现组件化。举个栗子:https://ant.design/components/popconfirm/
react+antd多页面框架
01-08
react+antd多页面框架
基于layui实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
自定义antd 穿梭框Transfer的搜索事件，搜索时使用后端接口进行搜索
最新发布
qq_44416706的博客
08-31 631
业务场景所限，不使用组件自带搜索效果，需要自定义antd 穿梭框Transfer的搜索事件,并且满足多个数据以逗号分隔进行搜索
巧用ant-design menu解决类似穿梭框并解决单击双击事件分离问题
qq_36384745的博客
04-26 673
巧用ant-design menu模拟穿梭框，巧用ant-design menu解决单击双击事件分离问题，react双击不触发单击事件
ant-design-vue穿梭框，当tree遇到Transfer
ddong345的博客
07-12 7542
最近项目中运动用到了transfer，而且还和tree一起运用，真的是头大，不过还好，最终还是解决了。 ant-design-vue文档里都有，我只粘贴部分代码-------- <a-transfer class="tree-transfer" :data-source="dataSource" :target-keys="targetKeys"//重要的部分 :render="item => item.title" :show.
穿梭框测试2
weixin_47025422的博客
07-20 111
const [readOnlyAllKeyRight, setReadOnlyAllKeyRight] = useState<string[]>([]) // 右侧所有的key。const [checkListRight, setCheckListRight] = useState<string[]>([]) // 存储在右侧选择框中的key。const [checkListLeft, setCheckListLeft] = useState<string[]>([]) // 存储左侧选择框选中的key。
实现table表格checkbox复选框的全选 反选
11-11
实现table表格checkbox复选框的全选 反选.
Vue AntDesign自定义树形 a-tree 穿梭框 a-transfer
qq_41835813的博客
07-16 6665
<template> <div id="app"> <div> <a-transfer class="tree-transfer" :data-source="dataSource" :target-keys="targetKeys" :render="item => item.title" @change="onChange" .
vue-antd 树形控件全选与全不选
weixin_50572740的博客
04-18 3551
<a-button type="primary" @click="allCheck">{{allCheckFlag ? "全不选" : "全选"}}</a-button> <div class="tree-box"> <a-tree v-model="checkedKeys" checkable :defaultExpandAll="true" :tree-data="treeData" :replaceFields="repla...
前端react+Ant Design 给穿梭框Transfer 添加导入导出按钮，难点在于导入数据后怎么赋值给右侧
m0_72154126的博客
06-04 772
react+Ant Design 给穿梭框Transfer
ant-design实现树的穿梭框，穿梭后右侧是已选树（一）
Embrace924的博客
05-12 3220
/ 处理树的内部自定义内容return (});generateTree的四个参数：treeNodes （树数据）, checkedKeys （已选值）, searchValue（搜索值）, disabled（是否禁止）左边的treeNodes ：原本的树/通过搜索后的树return (
Ant-Design 中a-transfer穿梭框 组件的使用
PIKapikaaaa的博客
06-29 3845
Ant Design组件中穿梭框（Transfer）的详细使用。解释了每行代码，并赋予案例
Antd的Transfer穿梭框Tree树穿梭框搜索筛选数据
weixin_46200547的博客
01-19 8778
antd的官方示例demo中有普通的transfer按照条件筛选数据，只需要添加API参数：showSearch，但是在Tree树穿梭框中会失效，并不能筛选出，而官方实例也没有给出解决示例，这里给出一个解决方法 查看API: 发现onSearch 搜索框内容时改变时的回调函数利用该参数 一个实现思路就是在你的onSearch里面去筛选你的dataSource数据： 另外官方给的树形穿梭框示例会导致滚动条不可使用，这里需要单独设置： 树结构： 另一边： 根据官方组件结合自己的数据业务场景修改，附上我
Ant Design Vue.js组件中，穿梭框a-transfer中怎么实现全选
浪潮行舟_chenjin2136
05-18 762
这样，当用户在穿梭框中选择项目时，我们将在组件中保存选定的key值列表，并在选择项目时更新全选状态。属性设置为一个空数组，以便在初始状态下将全选状态设置为初始数据中的key值列表。在Vue.js和Ant Design Vue.js组件中，可以使用。以下是一个示例代码，演示如何在Ant Design Vue.js的。属性为一个提示文本，以便在用户输入搜索关键字时显示该提示文本。方法，用于在用户选择项目时更新全选状态。，以便在穿梭框中显示可搜索的数据。，以便允许用户选择多个项目。在上面的代码中，我们首先在。
antd中Select下拉框全选、全不选的处理方法
清颖的博客
08-25 4229
Select组件的`dropdownRender`属性，可以扩展下拉菜单。 我们只需要在这个属性中编辑代码，将操作区域用Divider组件与选项分离开即可。
antd transfer tree基于树结构的穿梭框
05-25
antd transfer tree 是一个基于树结构的穿梭框组件，它可以让用户在两个树形结构之间进行拖拽式的选择操作，同时还支持搜索、展开、收起等功能，非常适合用于需要选择大量数据的场景。 在使用时，首先需要通过 dataSource 属性传入树形数据源，然后通过 render 函数来自定义每个节点的展示方式。同时，还可以通过 showSearch、searchPlaceholder、treeDefaultExpandAll 等属性来控制搜索、默认展开等行为。 下面是一个简单示例： ``` import { TransferTree } from 'antd'; const data = [ { title: 'node1', key: 'node1', children: [ { title: 'child1-1', key: 'child1-1', }, { title: 'child1-2', key: 'child1-2', }, ], }, { title: 'node2', key: 'node2', children: [ { title: 'child2-1', key: 'child2-1', }, { title: 'child2-2', key: 'child2-2', }, ], }, ]; function renderTreeNode(node) { return <span>{node.title}</span>; } function App() { return ( <TransferTree dataSource={data} render={renderTreeNode} showSearch searchPlaceholder="Search" treeDefaultExpandAll /> ); } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值