{"id":16347267,"url":"https://github.com/hsiangleev/eletree","last_synced_at":"2025-03-16T15:31:03.229Z","repository":{"id":43484395,"uuid":"267819690","full_name":"hsiangleev/eleTree","owner":"hsiangleev","description":"Tree component based on virtual dom","archived":false,"fork":false,"pushed_at":"2023-09-07T09:02:27.000Z","size":2390,"stargazers_count":43,"open_issues_count":5,"forks_count":26,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-18T04:18:51.190Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://eletree.hsianglee.cn/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsiangleev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-29T09:34:21.000Z","updated_at":"2023-12-20T07:24:14.000Z","dependencies_parsed_at":"2024-06-19T05:14:11.886Z","dependency_job_id":"1da91b30-5d67-43e7-bfd8-2f07e31c64b8","html_url":"https://github.com/hsiangleev/eleTree","commit_stats":{"total_commits":91,"total_committers":2,"mean_commits":45.5,"dds":0.01098901098901095,"last_synced_commit":"02c011715c1142d89902c7147d81394269d208a9"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2FeleTree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2FeleTree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2FeleTree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2FeleTree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsiangleev","download_url":"https://codeload.github.com/hsiangleev/eleTree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665213,"owners_count":16860197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T00:40:53.177Z","updated_at":"2024-10-27T10:49:26.759Z","avatar_url":"https://github.com/hsiangleev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## [eleTree2.0在线文档](https://eletree.hsianglee.cn/)\n\n### 说明\n\n* 基于虚拟dom重写eleTree插件\n* 移除layui和jquery，完全基于snabbdom，渲染性能大大优化\n* es6加webpack打包，支持import导入，layui导入和CDN直接引入的方式\n* 功能包括自定义图标，单选，多选，右键菜单，复制粘贴，懒加载，拖拽，搜索等\n\n### 本地开发测试\n\n```bash\ngit clone https://github.com/hsiangleev/eleTree.git\n\ncd eleTree\n\nnpm install\n\n# 浏览器访问 http://localhost:3000\nnpm run start\n\n# 生成\nnpm run build\n\n# vuepress文档在线查看(浏览器访问http://localhost:3001)\nnpm run docs:start\n```\n\n### 安装\n\n```bash\nnpm install eletree -D\n```\n\n### CDN引入\n\n```html\n\u003c!-- js文件 --\u003e\n\u003cscript src=\"//unpkg.com/eletree/dist/eleTree.js\"\u003e\u003c/script\u003e\n\u003c!-- 加载字体文件样式 --\u003e\n\u003clink rel=\"stylesheet\" href=\"//unpkg.com/eletree/dist/css/icon.css\"\u003e\u003c/script\u003e\n\u003c!-- 使用图片地址 --\u003e\n\u003c!-- imgUrl: \"//unpkg.com/eletree/dist/images/\" --\u003e\n```\n\n### 快速开始\n\n`\u003cdiv class=\"eletree\"\u003e\u003c/div\u003e`\n\n```javascript\nvar el = eleTree({\n    el: '.eletree',\n    url: '/eleTree/json/1.json',\n    highlightCurrent: true,\n    showCheckbox: true\n})\nel.getChecked()\nel.on(\"checkbox\", function(data) {\n    console.log(data)\n})\n```\n\n## api文档\n\n### options属性\n\n#### 基础属性\n\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| el | dom选择器 | string | — | — |\n| data | 静态数据 | array | — | — |\n| emptText | 当数据为空时显示的内容 | string | — | 暂无数据 |\n| highlightCurrent | 是否高亮当前选中节点 | boolean | — | false |\n| defaultExpandAll | 是否默认展开所有节点 | boolean | — | false |\n| autoExpandParent | 展开子节点的时候是否自动展开父节点 | boolean | — | false |\n| expandOnClickNode | 是否在点击文本的时候展开或者收缩节点，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点 | boolean | — | true |\n| checkOnClickNode | 复选框是否在点击文本的时候选中节点 | boolean | — | false |\n| radioOnClickNode | 单选框是否在点击文本的时候选中节点 | boolean | — | false |\n| defaultExpandedKeys | 默认展开的节点的 key 的数组 | array | — | — |\n| showCheckbox | 是否显示checkbox | boolean | — | false |\n| checkStrictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 | boolean | — | false |\n| isDefaultChangePstatus | 在显示复选框并且父子关联的情况下，初始数据是否只是子节点影响父节点，默认false，即父子关联 | boolean | — | false |\n| defaultCheckedKeys | 默认勾选的节点的 key 的数组 | array | — | — |\n| accordion | 是否每次只打开一个同级树节点展开（手风琴效果） | boolean | — | false |\n| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |\n| showLine | 是否显示虚线 | boolean | — | true |\n| imgUrl | 图片所在的文件夹路径 | string | — | ./images/ |\n| icon | 使用自定义图标或图片 | object | fold，leaf，checkFull，checkHalf，checkNone，dropdownOff，dropdownOn，loading，radioCheck，radioCheckNone | 每个属性默认值均为空字符串 |\n| done | 树渲染完成之后的回调，参数为data数据 | function | — | — |\n| lazy | 开启懒加载 | boolean | — | false |\n| rightMenuList | 开启右键菜单 | array | \"copy\", \"paste\", \"paste_before\", \"paste_after\", \"cut_paste\", \"edit\", \"remove\", \"add_child\", \"add_before\", \"add_after\" | [] |\n| showRadio | 是否显示radio | boolean | — | false |\n| radioType | 单选范围（是同一级还是整体只能选择一个） | string | level/all | level |\n| defaultRadioCheckedKeys | radio默认选中项 | array | — | — |\n| defaultPid | 当使用pid格式的数据时，第一层数据的默认值 | string/number | — | '' |\n| draggable | 是否开启拖拽节点功能 | boolean | — | false |\n| customText | 节点文本自定义函数；| function | — | — |\n\n#### 异步属性\n\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| url | 异步接口地址 | string | — | — |\n| method | 接口http请求类型 | string | get,post | get |\n| where | 接口的其它参数 | object | — | — |\n| headers | 接口的请求头 | object | — | — |\n| response | dom选择器 | string | — | — |\n| request | dom选择器 | string | — | — |\n\n### 方法\n\n| 方法名      | 说明          | 参数      |\n|---------- |-------------- |---------- |\n| on | 事件回调 | (type, callback)1.事件名，2.触发事件时的回调函数； |\n| getChecked | 获取复选框选中的节点信息 | (leafOnly, includeHalfChecked)1.是否只选中叶子节点，默认false，2.是否包括半选节点，默认false |\n| setChecked | 设置复选框选中的节点 | (checkArr, isUnCheckAll)1.设置选中项数组，2.是否先清空原有的选中项，默认true |\n| unChecked | 取消复选框选中的节点 | (unCheckArr)1.取消选中的节点数组；不传参数则默认清空所有选中项； |\n| setAllChecked | checkbox选中所有节点，除了禁用的节点 | — |\n| reverseChecked | checkbox反选所有节点，除了禁用的节点 | — |\n| getRadioChecked | 获取单选框选中的节点信息 | — |\n| setRadioChecked | 设置单选框选中的节点 | (checkArr, isUnCheckAll)1.设置选中项数组，2.是否先清空原有的选中项，默认true |\n| unRadioChecked | 取消单选框选中的节点 | (unCheckArr)1.取消选中的节点数组；不传参数则默认清空所有选中项 |\n| expandAll | 展开所有节点 | — |\n| unExpandAll | 合并所有节点 | — |\n| append | 添加子节点(\u003cspan style=\"color: #ff4200\"\u003e有两种格式\u003c/span\u003e) | A. (id, array/object)1.查找需要添加的节点id，2.添加的子节点数据数组；id传null或空字符串则会添加到根节点\u003c/br\u003eB. (array/object)只传一个array/object参数则代表传入的为pid格式的数据，即在节点pid下添加子节点 |\n| updateKeySelf | 更新当前节点数据或移动某些节点(\u003cspan style=\"color: #ff4200\"\u003e有两种格式\u003c/span\u003e) | A. (id, object)1.查找需要修改的节点id，2.需要修改的数据\u003c/br\u003eB. (array/object)只传一个array/object参数则代表传入的为pid格式的数据，即修改id的数据，如果pid改变，则代表移动节点 |\n| remove | 删除节点数据 | (removeArr)1.需要删除的节点id数组(可以移除多个节点) |\n| edit | 编辑节点 | (id, nodeType)1.需要编辑的节点id, 2. 当前编辑的节点类型，对应触发的回调事件名称，可选值(edit/add_child/add_before/add_after) |\n| insert | 在某个节点前后插入数据 | (id, array/object, type)1.查找需要添加的节点id，2.需要添加节点数据数组，3.类型，在当前节点前插入还是节点后插入，可选参数('before','after')，默认节点前 |\n| reload | 重新渲染树节点 | (options)1.传入object，参数初始参数一致 |\n| search | 搜索树节点 | (value, callback)1.需要搜索的文本信息，2. 传入的搜索条件，函数返回值为true则显示该节点； |\n| getAllNodeData | 获取所有节点数据 | ('c'/'p') 传入字符串'c'则返回的数据结构为父子结构，传入字符串'p'则返回pid格式的数据，默认为'c' |\n| copy | 复制节点 | (id) 1.需要复制的节点id |\n| cutPaste | 剪贴节点 | (id) 1.需要剪贴的节点id |\n| paste | 粘贴节点 | (id, nodeType) 1.需要粘贴到的节点id，2.粘贴到该节点的位置，可选参数('before','after','children')，默认children |\n| getClipboardData | 获取剪贴板数据 | 移动或复制或剪贴节点都会把该节点复制到剪贴板，如果剪贴板没有数据，则返回null |\n\n### 事件\n\n| 方法名      | 说明          | 回调参数      |\n|---------- |-------------- |---------- |\n| checkbox | checkbox选择 | (type, data)1.事件名，2.当前节点数据 |\n| radio | radio选择 | (type, data)1.事件名，2.当前节点数据 |\n| click | 节点点击 | (type, data)1.事件名，2.当前节点数据 |\n| copy | 节点复制 | (type, data, load, stop)1.事件名，2.当前节点数据, 3. 执行该操作, 4. 取消执行该操作 |\n| paste | 粘贴到子节点 | 与copy一致 |\n| paste_before | 粘贴到节点之前 | 与copy一致 |\n| paste_after |  粘贴到节点之后 | 与copy一致 |\n| cut_paste | 剪贴节点 | 与copy一致 |\n| edit | 编辑节点 | 与copy一致 |\n| remove | 删除节点 | 与copy一致 |\n| add_child | 添加子节点 | 与copy一致 |\n| add_before |  添加到节点前 | 与copy一致 |\n| add_after | 添加到节点后 | 与copy一致 |\n| custom_ | 自定义事件 | 与copy一致 |\n| drag | 拖拽事件 | (type, data, load, stop, endData, range)1.事件名，2.初始移动的节点数据, 3. 执行该操作, 4. 取消执行该操作, 5. 移动到某节点的数据, 6. 移动到节点范围(outer:移动到根节点/inner:移动到子节点) |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsiangleev%2Feletree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsiangleev%2Feletree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsiangleev%2Feletree/lists"}