树形结构-CRUD接口

已于 2024-06-19 09:40:03 修改
阅读量472 收藏 2
点赞数 6
文章标签： 前端 javascript 开发语言
于 2024-05-30 14:46:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44161703/article/details/139323553
版权

先看一下效果：整体的效果
   

新增效果 --默认值是 default

 修改效果 -

大致效果如上

---------------------------------------------------------------------------------------------------------------------------------
下面讲解代码如何实现的
 根据你使用的UI的框架中的树结构---形成相应的数据结构（递归形式）-如果后端给你分好了（感谢他）
这个是给我的是一个  数组包裹的对象形式 进行递归
这个我写在--一个通用的 js 导出形式  这边我需要是的是两种类型 所以分了一下（效果图上的是第一个）  
解释一下：data:后端给你的数据
                  parentId是 从0 或者 -1 开始 看你的需求 我这边是 -1

                   show：我这是区分我要的是那种类型         

递归形式走的

export function buildTree(data, parentId, show) {
  const result = [];
  data?.filter(item => item.parentId === parentId)
    .forEach(items => {
      const children = buildTree(data, items.id, show);
      let node = ''
      if (!show) {
        node = {
          value: `${items.categoryName}`,
          key: `${items.id}`,
          defaultValue: `${items.categoryName}`,
          isEditable: false,
          parentId: `${items.parentId}`,
          children: children.length ? children : undefined,
        };
      } else {
        node = {
          value: `${items.id}`,
          title: `${items.categoryName}`,
          children: children.length ? children : undefined,
        };
      }

      result.push(node);
    });
  return result;
}

 这边都是实现的代码了-------可以详细看下  ---谢谢  -如果不懂-请评论


import { DownOutlined, EditOutlined, PlusOutlined, MinusOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
import { Input, Tree, message } from 'antd';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { GetclubGoodsCategoryList, PostclubGoodsCategoryRemove, PostclubGoodsCategorySave, PostclubGoodsCategoryUpdate } from '@/services/commodity';
import { buildTree } from '@/utils/utils';

const { TreeNode } = Tree;
// 三张图
import reduce from '@/assets/icon/reduce.png';
import addIng from '@/assets/icon/addIng.png';
import editIng from '@/assets/icon/editIng.png';
function TreeData({ onNodeClick }) {

    // 佛祖保佑，不会报错

    const [selectedNode, setSelectedNode] = useState(null);

    // const treeData = buildTree(data1, 0);
    const expandedKeyArr = ["0"];

    const [data, setData] = useState();
    const [listObj, setListObj] = useState({});
    let isMounted = true;
    const getDate = async () => {
        try {
//获取最初的数据  ------------接口
            let res = await GetclubGoodsCategoryList();
            if (isMounted && res && res.code == "200") {
                const treeData = buildTree(res.data, 0);
                setData(treeData);
            }
        } catch (error) {
            console.error("Error fetching data: ", error);
        }
    };
    useEffect(() => {

        getDate();
        return () => {
            isMounted = false;
        };
    }, []);


    const [expandedKeys, setExpandedKeys] = useState(expandedKeyArr);

    // 修改---树结构 有值---接口
    const onChangeUpdate = async () => {
        if (Object.keys(listObj).length > 0) {
            let res = await PostclubGoodsCategoryUpdate({
                categoryName: listObj.value,
                // parentId: listObj.key,
                id: listObj.key,

            });
            if (res && res.code == "200") {
                message.success("修改成功");
//重新获取树形结构
                getDate();
            }
        }

    }

    const onExpand = (expandedKeys) => {
        setExpandedKeys(expandedKeys);
    };
    const handleNodeClick = (node) => {
        setSelectedNode(node);

        // 进行暴露---作为一个组件调用你所点击的值对象
        onNodeClick(node);
    };

    const renderTreeNodes = (data, depth = 0) => {
        return data?.map((item) => {
            const title = item.isEditable ? (
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                }}>

                        {/*  输入框显示 和   一个对号  一个 叉号

*/}

                    <Input placeholder="输入名称" defaultValue={item.defaultValue}
                        onChange={(e) => onChange(e, item)} />

                    <CheckOutlined style={{
                        margin: '0 4px',
                    }} onClick={() => onSave(item)} />
                    <CloseOutlined onClick={() => onClose(item.parentKey, item.defaultValue)} />
                </div>
            ) : (
                <div onClick={() => handleNodeClick(item)}
                    style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                    }}
                >
                    <div
                        style={{
                            whiteSpace: 'nowrap'
                        }}
                    >{item.value}</div>
                    <div
                        style={{
                            display: 'flex',
                            flexWrap: 'nowrap',
                            alignItems: 'center',
                        }}
                    >
                        {/* <EditOutlined onClick={() => onEdit(item.key)} />
                        <PlusOutlined onClick={() => onAdd(item.key)} />
                        {item.parentKey !== "0" && (
                            <MinusOutlined onClick={() => onDelete(item.key)} />
                        )} */}

                        {/* 两层之上就没有图标l 
                        效果上的左边字 右边图片 

*/}
                        {
                            item.value &&
                            <>
                                <img style={{ margin: '0 4px' }} width='15px' onClick={() => onEdit(item.key)} height='15px' src={editIng} alt="" />
                                {
                                    depth < 2 && <img width='15px' onClick={() => onAdd(item.key)} height='15px' src={addIng} alt="" />
                                }

                                <img style={{ margin: '0 4px' }} onClick={() => onDelete(item.key)} width='15px' height='15px' src={reduce} alt="" />
                            </>

                        }
                    </div>
                </div>
            );

            if (item.children) {
                return (
                    <TreeNode title={title} key={item.key}>
                        {renderTreeNodes(item.children, depth + 1)}
                    </TreeNode>
                );
            }

            return <TreeNode title={title} key={item.key} />;
        });
    };

    const onAdd = (key) => {
        if (expandedKeys.indexOf(key) === -1) {
            expandedKeys.push(key);
        }
        setExpandedKeys(expandedKeys.slice());
        addNode(key, data);
        setData([...data]);
    };

    const onEdit = (key) => {
        editNode(key, data);
        setData([...data]);
    };

    const editNode = (key, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.isEditable = true;
            } else {
                item.isEditable = false;
            }
            item.value = item.defaultValue;
            if (item.children) {
                editNode(key, item.children);
            }
        });

    const getRandomNumber = (min = 1, max = 10000) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    const addNode = (key, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                if (item.children) {
                    item.children.push({
                        value: "default",
                        key: getRandomNumber(),
                        parentKey: key,
                        isEditable: false,
                        showAdd: true
                    });
                } else {
                    item.children = [
                        {
                            value: "default",
                            key: getRandomNumber(),
                            parentKey: key,
                            isEditable: false,
                            showAdd: true
                        },
                    ];
                }
                return;
            }
            if (item.children) {
                addNode(key, item.children);
            }
        });

    const onChange = (e, key) => {
        changeNode(key.parentKey ? key : key, e.target.value, data);
        setData([...data]);

    };

    const changeNode = (key, value, data) =>

        data.forEach((item) => {

            if (item.parentKey || item.key == key.key) {

                item.value = value;
            }
            if (item.children) {
                changeNode(key, value, item.children);
            }
        });

    // 保存---数据新增---接口
    const onSaveObj = async () => {

        let res = await PostclubGoodsCategorySave({
            categoryName: listObj.value,
            parentId: listObj.parentKey,
        })
        if (res && res.code === 200) {
            message.success('新增成功')
            getDate();
        } else {
            message.error('新增失败')
        }
    };

    useEffect(() => {

        if (listObj.showAdd) {

            onSaveObj();
        } else {
            onChangeUpdate()
        }


    }, [listObj])
    const onSave = (key) => {

        if (key.value == undefined) {
            message.error('请输入分类名称')
            return
        }
        setListObj(key)
        saveNode(key, data);
        setData([...data]);

    };


    const saveNode = (key, data) =>
        data.forEach((item) => {
            if (item.parentKey === key) {
                item.defaultValue = item.value;
            }
            if (item.children) {
                saveNode(key, item.children);
            }
            item.isEditable = false;
        });

    const onClose = (key, defaultValue) => {
        closeNode(key, defaultValue, data);
        setData([...data]);
    };

    const closeNode = (key, defaultValue, data) =>
        data.forEach((item, index) => {
            item.isEditable = false;
            if (item.parentKey === key) {
                data.splice(index, 1);
                item.value = defaultValue;
            }
            if (item.children) {
                closeNode(key, defaultValue, item.children);
            }
        });

    const onDelete = (key) => {
        deleteNode(key, data);
        setData([...data]);
    };
    //删除节点---接口
    const deleteIds = async (key) => {
        let data = await PostclubGoodsCategoryRemove({
            ids: key,
        })
        if (data && data.code === 200) {
            message.success('删除成功')
            getDate();
        }
    }
    const deleteNode = (key, data) =>
        data.forEach((item, index) => {
            if (item.key === key) {
                if (!item.showAdd) {
                    deleteIds(key);
                }


                data.splice(index, 1);

                return;
            } else {
                if (item.children) {
                    deleteNode(key, item.children);
                }
            }
        });

    return (
        <div style={{
            position: 'relative',
            left: '-14px'
        }}>
            <Tree onExpand={onExpand} expandedKeys={expandedKeys}>
                {renderTreeNodes(data)}
            </Tree>

        </div>
    );
}

export default TreeData;


第二个版本：更新  进行右击出菜单进行新增-修改-删除

直接上代码---效果


import { DownOutlined, EditOutlined, PlusOutlined, MinusOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
import { Dropdown, Input, Tooltip, Tree, message, } from 'antd';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { GetclubGoodsCategoryList, PostclubGoodsCategoryRemove, PostclubGoodsCategorySave, PostclubGoodsCategoryUpdate } from '@/services/commodity';
import { buildTree } from '@/utils/utils';
import styles from './index.less';
const { TreeNode, DirectoryTree } = Tree;
import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
//部分引入根据需要引入  
// import reduce from '@/assets/icon/reduce.png';
// import addIng from '@/assets/icon/addIng.png';
// import editIng from '@/assets/icon/editIng.png';
function TreeData({ onNodeClick, moren }) {

    // 佛祖保佑，不会报错

    const [selectedNode, setSelectedNode] = useState(null);

    // const treeData = buildTree(data1, 0);
    const expandedKeyArr = ["0"];

    const [data, setData] = useState();
    const [listArr, setListArr] = useState({});
    const [listObj, setListObj] = useState({});
    let isMounted = true;
    const getDate = async () => {
        try {

            setData(null);
            let res = await GetclubGoodsCategoryList();
            if (isMounted && res && res.code == "200") {
                const treeData = buildTree(res.data, 0);
                setData(treeData);
                setSelectedNode(null); // Reset selected node
                setExpandedKeys(["0"]); // Reset expanded keys
            }
        } catch (error) {
            console.error("Error fetching data: ", error);
        }
    };
    const [expandedKeys, setExpandedKeys] = useState(expandedKeyArr);
    useEffect(() => {
        console.log('moren', moren)
        getDate();

        return () => {
            isMounted = false;
        };
    }, [moren]);




    // 修改---树结构 有值
    const onChangeUpdate = async () => {
        if (Object.keys(listObj).length > 0) {
            let res = await PostclubGoodsCategoryUpdate({
                categoryName: listObj.value,
                // parentId: listObj.key,
                id: listObj.key,

            });
            if (res && res.code == "200") {
                message.success("修改成功");
                getDate();
            }
        }

    }

    const onExpand = (expandedKeys) => {
        console.log('setExpandedKeys', expandedKeys);
        setExpandedKeys(expandedKeys);
    };
    const handleNodeClick = (node) => {
        setSelectedNode(node);

        // 进行暴露
        onNodeClick(node);
    };
    // const esLing = (node) => {
    //     // 判断字符串长度并添加省略号  
    //     return node.length > 6 ? node.slice(0, 4) + '...' : node;
    // }
    const esLing = (str, maxLength = 8) => {
        let charCount = 0;
        let truncatedStr = '';
        if (str) {
            for (let char of str) {
                charCount += char.match(/[^\x00-\xff]/) ? 2 : 1;
                if (charCount > maxLength * 2) {
                    truncatedStr += '...';
                    break;
                }
                truncatedStr += char;
            }


        }
        return truncatedStr;

    }

    const renderTreeNodes = (data, depth = 0) => {
        return data?.map((item) => {
            const title = item.isEditable ? (
                <div style={{
                    width: '130px',
                    display: 'flex',
                    // justifyContent: 'space-between',
                    alignItems: 'center',
                }}>
                    {/* <Input placeholder="输入名称" defaultValue={item.defaultValue}
                        onChange={(e) => onChange(e, item)} />

                    <CheckOutlined style={{
                        margin: '0 4px',
                    }} onClick={() => onSave(item)} />
                    <CloseOutlined onClick={() => onClose(item.parentKey, item.defaultValue)} /> */}


                    <Input
                        placeholder="输入名称" defaultValue={item.defaultValue}
                        onChange={(e) => onChange(e, item)}

                        suffix={
                            <>
                                <CheckOutlined style={{
                                    margin: '0 4px',
                                }} onClick={() => onSave(item)} />

                                <CloseOutlined onClick={() => onClose(item.parentKey != undefined ? item.parentKey : item.key, item.defaultValue || item.value, item)} />
                            </>
                        }
                    />
                </div>
            ) : (
                <div onClick={() => handleNodeClick(item)}
                    style={{
                        display: 'flex',
                        // justifyContent: 'space-between',
                        alignItems: 'center',
                        textIndent: '-11px'
                    }}
                >
                    <div
                        title={item.value}
                        style={{
                            whiteSpace: 'nowrap',
                            textIndent: '-3px'
                        }}
                    >{esLing(item.value)}</div>
                    <div
                        style={{
                            display: 'flex',
                            flexWrap: 'nowrap',
                            alignItems: 'center',
                        }}
                    >
                        {/* <EditOutlined onClick={() => onEdit(item.key)} />
                        <PlusOutlined onClick={() => onAdd(item.key)} />
                        {item.parentKey !== "0" && (
                            <MinusOutlined onClick={() => onDelete(item.key)} />
                        )} */}

                        {/* 两层之上就没有图标l */}
                        {
                            item.value &&
                            <>
                                {/* <img style={{ margin: '0 4px' }} width='15px' onClick={() => onEdit(item.key)} height='15px' src={editIng} alt="" /> */}
                                {/* {
                                    depth < 2 && <img width='15px' onClick={() => onAdd(item.key)} height='15px' src={addIng} alt="" />
                                }

                                <img style={{ margin: '0 4px' }} onClick={() => onDelete(item.key)} width='15px' height='15px' src={reduce} alt="" /> */}
                            </>

                        }
                    </div>
                </div>
            );

            if (item.children) {
                return (
                    <TreeNode title={title} key={item.key}>
                        {renderTreeNodes(item.children, depth + 1)}
                    </TreeNode>
                );
            }

            return <TreeNode blockNode title={title} key={item.key} />;
        });
    };
    const di = (data, newValue) => {
        for (let i = 0; i < data.length; i++) {
            if (data[i].value == newValue) {
                return message.error('不能重复添加');
            }
            if (data[i].children) {
                const result = di(data[i].children, newValue);
                if (result) {
                    return result;
                }
            }
        }
        return null;
    };

    const onAdd = (key) => {
        // if (data) {
        //     console.log('http://localhost:8889/', data)
        //     for (var i = 0; i < data.length; i++) {
        //         if (data[i].value == '新值') {

        //             return message.error('不能重复添加');
        //         }
        //     };
        // }
        let d = di(data, '新值')
        console.log('d', d)
        if (d) return

        if (expandedKeys.indexOf(key) == -1) {
            expandedKeys.push(key);
        }
        setExpandedKeys(expandedKeys.slice());
        addNode(key, data);
        setData([...data]);
    };

    const onEdit = (key) => {
        editNode(key, data);
        setData([...data]);
    };

    const editNode = (key, data) =>
        data.forEach((item) => {

            if (item.key == key) {
                item.isEditable = true;
            } else {
                item.isEditable = false;
            }
            item.value = item.defaultValue;
            if (item.children) {
                editNode(key, item.children);
            }
        });

    const getRandomNumber = (min = 1, max = 10000) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };
    const onAddRoot = () => {
        if (data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].value == '新值') {
                    return message.error('不能重复添加');
                }
            };
        }
        const newNode = {
            value: '新值',
            key: getRandomNumber(),
            parentKey: null,
            isEditable: true,
            showAdd: true,
        };

        setData([...data, newNode]);
        setExpandedKeys([...expandedKeys, newNode.key.toString()]);
    };
    const addNode = (key, data) =>

        data.forEach((item) => {
            if (item.key == key) {
                if (item.children) {
                    item.children.push({
                        value: "新值",
                        key: getRandomNumber(),
                        parentKey: key,
                        isEditable: true,
                        showAdd: true
                    });
                } else {
                    item.children = [
                        {
                            value: "新值",
                            key: getRandomNumber(),
                            parentKey: key,
                            isEditable: true,
                            showAdd: true
                        },
                    ];
                }
                return;
            }
            if (item.children) {
                addNode(key, item.children);
            }

        });

    const onChange = (e, key) => {
        changeNode(key.parentKey ? key : key, e.target.value, data);
        setData([...data]);

    };

    const changeNode = (key, value, data) =>

        data.forEach((item) => {

            if (item.parentKey || item.key == key.key) {

                item.value = value;
            }
            if (item.children) {
                changeNode(key, value, item.children);
            }
        });

    // 保存---数据新增
    const onSaveObj = async () => {

        let res = await PostclubGoodsCategorySave({
            categoryName: listObj.value,
            parentId: listObj.parentKey ? listObj.parentKey : 0,
        })
        if (res && res.code === 200) {
            message.success('新增成功')
            getDate();
        } else {
            message.error('新增失败')
        }

        setListArr({})
    };

    useEffect(() => {

        if (listObj.showAdd) {

            onSaveObj();
        } else {
            onChangeUpdate()
        }


    }, [listObj])
    const onSave = (key) => {

        if (key.value == undefined) {
            message.error('请输入分类名称')
            return
        }
        setListObj(key)
        saveNode(key, data);
        setData([...data]);

    };


    const saveNode = (key, data) =>
        data.forEach((item) => {
            if (item.parentKey == key) {
                item.defaultValue = item.value;
            }
            if (item.children) {
                saveNode(key, item.children);
            }
            item.isEditable = false;
        });

    // 删除最后一个
    const removeLastObject = (arr) => {
        if (Array.isArray(arr) && arr.length > 0) {
            arr.pop();
        }
        return arr;
    }

    const onClose = (key, defaultValue, item) => {
        console.log('item', item)
        console.log('defaultValue12', defaultValue)
        console.log('key', key)
        if (data.length > 0 && key == undefined) {
            let res = JSON.parse(JSON.stringify(data));
            let a = removeLastObject(res)
            console.log('data', a)
            setData([...a]);
            return
        }
        closeNode(key, defaultValue, data);
        setData([...data]);
    };

    const closeNode = (key, defaultValue, data) => {
        console.log('defaultValuecloseNode', defaultValue)
        if (defaultValue == undefined || defaultValue == '') {
            return message.error('请输入分类名称')
        }
        data.forEach((item, index) => {

            if (item.parentKey != undefined ? item.parentKey : item.key == key) {
                item.isEditable = false;
                // if (defaultValue == undefined) {
                //     data.splice(index, 1);
                //     return
                // }

                // item.value = defaultValue;
                console.log('item12', item)
                console.log('keykey', key)
            }
            if (item.children) {
                closeNode(key, defaultValue, item.children);
            }
            setListArr({})
        });
    }


    const onDelete = (key) => {

        deleteNode(key, data);
        setData([...data]);
    };
    //删除节点
    const deleteIds = async (key) => {
        let data = await PostclubGoodsCategoryRemove({
            ids: key,
        })
        if (data && data.code == 200) {
            message.success('删除成功')
            getDate();
        }
        setListArr({})
    }
    const deleteNode = (key, data) => {
        data.forEach((item, index) => {
            if (item.key == key) {
                if (!item.showAdd) {
                    deleteIds(key);
                }


                data.splice(index, 1);

                return;
            } else {
                if (item.children) {
                    deleteNode(key, item.children);
                }
            }
        });

    }



    //    右键点击事件
    const onRightClickAll = ({ node }) => {
        console.log('node', node)
        setListArr(node)
    }
    const delShow = (d) => {
        console.log('ddd', d)
        if (Object.keys(d).length > 0) {
            onAdd(d.key)
        } else {
            onAddRoot()
        }
    }
    const items = [
        {
            label: (
                <div style={{
                    textAlign: 'center',
                }} onClick={() => delShow(listArr)}
                >
                    新增
                </div>
            ),
            disabled: listArr?.pos?.split('-').length == 4,
            key: '0',
        },
        {
            label: (
                <div style={{
                    textAlign: 'center',
                }} onClick={() => onEdit(listArr.key)}
                >
                    修改
                </div>
            ),
            key: '1',
            disabled: Object.keys(listArr).length == 0,
        },

        {
            label: (
                <div style={{
                    textAlign: 'center',
                }} onClick={() => onDelete(listArr.key)}>
                    删除
                </div>
            ),
            key: '2',
            disabled: Object.keys(listArr).length == 0,

        },
    ];
    return (



        <Dropdown
            overlayStyle={{

                background: '#f7f7f7',
                width: '83px',
                borderRadius: '2px 2px 2px 2px',
                border: '1px solid #E1E1E1',
                boxShadow: 'rgba(0, 0, 0, 0.05) 0px 2px 20px 0px'
            }}
            style={{
                width: '83px',
                borderRadius: '2px 2px 2px 2px',
                border: '1px solid #E1E1E1',
                background: '#f7f7f7',
                boxShadow: 'rgba(0, 0, 0, 0.05) 0px 2px 20px 0px'
            }}
            menu={{
                items,
            }}
            trigger={['contextMenu']}
        >
            <div
                className={styles.consty}
                style={{
                    position: 'relative',
                    // left: '-14px',
                    background: '#ffffff',
                    overflow: 'auto'
                }}>
                {
                    data &&
                    <Tree
                        // defaultExpandedKeys={data?.map(node => node.key)}
                        // autoExpandParent={true}
                        // defaultExpandAll={true}
                        // defaultExpandParent={true}
                        style={{
                            height: '82vh',
                            width: '130px'
                        }} onRightClick={onRightClickAll} blockNode onExpand={onExpand} expandedKeys={expandedKeys}>
                        {renderTreeNodes(data)}
                    </Tree>
                }


            </div>

            {/* <div

                style={{
                    textAlign: 'center',
                    height: 200,
                    lineHeight: '200px',
                    color: '#777',
                    background: '#f7f7f7'
                }}
            >
                Right Click on here
            </div> */}
        </Dropdown>




    );
}

export default TreeData;

 

qq_2524963996
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
关于树形结构查询的接口设计
m0_49605579的博客
06-27 1211
在实际开发中，经常会遇到树形结构的查询，如：菜单树、公司组织机构树、地区区划树等等业务，这里写下两个接口设计方案已供日后使用。 1.表结构设计 //一般单表树形结构基本上都为以下结构： id,name,parentId,其他业务指标 //多表树形同理,设计思路都是通过parentId关联在一起 2.树形返回类设计 @Data public class TreeNode implements Serializable { private String id; //名称 private S
树形结构的表设计与Java接口实现
llg___的博客
05-26 1902
定义返回给前端的vo类，核心属性//伪代码 //假设树形结构表的PO类叫TreePo @Data public class TreeVo extends TreePo {} //注意这里childrenTreeNodes类型为TreeVo，而不是TreePo，因为你儿子也有自己的儿子} }
一个树型通用接口
weixin_33701294的博客
10-12 353
　　项目中难免遇到使用树型结构，如部门、菜单等。 　　它们有共同的属性：id，name，parentId，因此抽象出一个接口，然后使用一个工具类实现列表转树的功能。 　　（其它这个是在另一个项目找到的，非原创，在此共享一下） 　　看源码： 　　1、树型结构接口TreeObject.java import java.util.List; /** * 这个是列表树形式显示的接口...
java构建树形接口三种种实现方法。
weixin_42518055的博客
03-31 2842
一、第一种方法 1、数据库结构，一张表。 roleCode为对应的id，superiorUnit为每条数据的父类ID、 2、bean结构 @Data @AllArgsConstructor @NoArgsConstructor public class RoleBean implements Serializable { private String roleCode; privat...
树形结构在数据库中的存储与CRUD操作
xys430381_1的专栏
02-27 1060
树状结构在数据库中都是以二维表的形式记录存储数据信息，因此需要设计合适的表结构，并有对应的CRUD算法。表结构直接决定了其各项操作的便利性和效率。　　一般来说，有邻接表法（基于继承关系）和先根遍历树算法（基于左右值编码）
jpa单表递归树形结构实现
07-23
在本示例中，我们将探讨如何使用Spring JPA来实现单表递归树形结构。 首先，我们需要理解递归树形结构。在数据库中，树形结构通常通过自关联来表示，即一个表的某个字段引用该表自身，形成一个层级关系。对于单表...
BS树形结构(jsp+mysql数据库+设计文档)
03-04
在这个项目中，树形结构的节点数据将存储在MySQL数据库中，通过SQL语句进行CRUD（Create, Read, Update, Delete）操作。 5. **树形结构**：树形结构是一种数据结构，其中每个节点可以有零个或多个子节点。在本项目...
springboot+mybatis-plus+gradle+mysql+swagger基础增删改查、树形查询
02-20
树形查询是指在数据库中查询具有层级关系的数据，例如部门结构、菜单系统等。MyBatis Plus提供了树形查询的支持，可以通过递归方式或者父子ID关联方式实现。在本项目中，可能涉及到的树形查询场景如组织架构、分类...
TreeView动态树形结构
08-08
在IT行业中，树形结构是一种常见的数据表示方式，特别是在用户界面设计中，如文件系统、组织结构图等。本文将详细讲解如何使用JavaScript构建动态树形结构，以及结合Struts和Hibernate实现服务器端的数据交互。 **...
hibernate自身关联一对多实例(树形结构)
04-14
本文将深入探讨“Hibernate自身关联一对多实例(树形结构)”这一主题，这在构建具有层次结构的数据模型时尤其常见，例如组织结构、地区树或者商品分类等。 首先，我们需要理解Hibernate的核心概念。Hibernate允许...
突破CRUD | 万能树工具类封装
JKX_geek的博客
03-06 211
个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈 0、学完本文你或许可以收获 感受一个树工具从初始逐步优化完善的过程 树工具封装的设计思考与实现思路 最后收获一款拿来即用的树工具源代码 对于前端树组件有一定了解和使用过的同学可直接跳跃到第3章节开始。 1、树长什么样 ？ 前端的树组件大多数情况下出现在后端的管理系统中，比如我们常见的菜单树...
springboot树形结构接口, 懒加载实现
bit的博客
04-01 1658
数据库关系有父子id的, 作为菜单栏展示时需要用前端需要用到懒加载, 所谓就是接口有一个标志位isLeaf, 前端请求后通过该字段判断该节点是否还有子节点数据创建数据库表 t_company_info结构有id和parentId标识, 用来表示父子关系有需要的配置文件可参考。
实现Comparable接口对树形结构数据进行排序
02-05 1515
背景： 数据库中无序的数据要按树形结构出输出， 如图所示：   每一个记录 对应 一条数据库的 数据， 需求来了，那么怎么实现呢，首先最简单的是直接从数据库 按顺序 查出，然后依次打印， 简单点说吧，oracle数据库有相应的语句可以实现，很容易，但是sql server 没有，尝试了下没有成功， 考虑数据库的兼容性，就像把数据到后台去排序， 那么，这也就是这篇雯所说的内容
java后台接口树形结构json数据返回
Jerry的一亩三分地
11-08 4718
适用于父子关系的数据结构 //从数据库中查找所有地址 @Select("select t.id as addressId,t.address_name as addressName,t.parent_id as parentId from t_equipment_address t") public List<EquipmentAddressVo> getAllEquipmen...
jsTree 核心功能（core functionality） API
weixin_30735391的博客
11-13 883
由于网站访问慢，所以拷贝了一份到此 https://viky-zhang.gitbooks.io/jstree-doc/content/api-core.html 1. jsTree 核心功能（core functionality） 1.1. $.jstree 包含所有 jstree 相关的函数和变量，包括用于创建、访问、维护实例的类和方法。 + ...
element tree树形结构接口不支持搜索、懒加载情况下实现搜索
xt_XiTu的博客
12-08 1274
目前项目中，element tree树形结构由于数据太多使用了懒加载，并且接口不支持搜索，只能由前端实现搜索功能，暂时按照自己思路实现功能。 思路为：输入搜索内容后，直接遍历树形结构的数据，通过filter筛选出结果之后再赋值给树形结构。 demo中是三层树形结构的筛选 代码为： template中： ...
树状结构对象(组织架构等)通用CRUD工具类
我的博客
01-15 1248
分享一个封装了通用的树状结构对象基础功能实现，如移动节点、删除节点等功能，可以极大的简化了后续对树状结构对象基础功能的开发工作
avue-crud自定义重置按钮
最新发布
12-06
但是可以根据d2-crud-plus的文档得知，d2-crud-plus支持自定义按钮，可以通过配置项的方式实现。具体步骤如下： 1.在d2-crud-plus的配置项中添加自定义按钮的配置，例如： ```javascript { // ... options: { /...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_2524963996

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值