如何使用 js 实现一个树组件
2024-08-23 23:37:49
如何使用 js 实现一个树组件
tree component
const arr = [
{
id: 1,
value: 1,
level: 1,
parentId: 0,
},
{
id: 2,
value: 2,
level: 1,
parentId: 0,
},
{
id: 3,
value: 3,
level: 2,
parentId: 1,
},
{
id: 4,
value: 4,
level: 2,
parentId: 1,
},
{
id: 5,
value: 5,
level: 3,
parentId: 2,
},
];
const obj = {
root: {
id: 0,
value: 0,
level: 0,
parentId: 0,
children: null,
},
}
const json = {
root: {
id: 0,
value: 0,
level: 0,
parentId: 0,
children: [
{
id: 1,
value: 1,
level: 1,
parentId: 1,
children: [
{
id: 3,
value: 3,
level: 2,
parentId: 2,
children: [
{
id: 5,
value: 5,
level: 3,
parentId: 2,
children: null,
},
],
},
{
id: 4,
value: 4,
level: 2,
parentId: 2,
children: null,
},
],
},
{
id: 2,
value: 2,
level: 1,
parentId: 1,
children: null,
},
]
}
}
const tree = {
"root": {
"id": null,
"title": "root",
"expanded": true,
"folder": true,
"selected": false,
"children": [
{
"id": null,
"title": "backend-publish/libs/layui-src/images/face/54.gif",
"expanded": true,
"folder": false,
"selected": false,
"children": null
},
{
"id": null,
"title": "backend-publish/libs/layui-src/images/face/54.gif",
"expanded": true,
"folder": false,
"selected": false,
"children": null
},
],
},
}
JSON.stringify
JSON.stringify(value[, replacer[, space]])
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
const log = console.log;
const obj = {
a: "a",
b: {
c: "c",
d: {
e: "e",
f: {
g: "g",
h: {
i: "i",
},
},
},
},
};
// OK
log(`obj nested =\n`, JSON.stringify(obj, null, 2));
// log(`obj nested =\n`, JSON.stringify(obj, null, 4));
// 隐藏 bug
// log(`obj nested =\n`, JSON.parse(JSON.stringify(obj)));
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- border:none;与border:0;的区别
- Java Gradle入门指南之gretty插件（安装、命令与核心特性）
- 【Tree 3】树形结构数据加载的思考
- PHP中的 extends与implements 区别 [转]
- oracle密码文件管理
- linux bash: sqlplus: command not found 错误处理
- JAVA调用易信接口向指定好友推送消息（二）POST测试
- erl0001-Erlang 设计原则 process port io
- 关于Eclipse(MyEclipse)中一次性批量导入多个项目Project.
- oracle report err:REP-2103 PL/SQL formula returned invalid value or no value
- iOS - UITableViewCell Custom Selection Style Color
- 随滚动条滚动的居中div
- 3 分钟的高速体验 Apache Spark SQL
- 二、WCF应用的通信过程
- [HNOI2004]宠物收养场 Treap前驱后继
- Nginx实战之反向代理WebSocket的配置实例
- vue项目基本流程
- [C#] C# 知识回顾 - Lambda
- MySQL中的information_schema数据库表说明
- 访问GitLab的PostgreSQL数据库-(3)