svelte-gantt实例API完全参考：selectTask、scrollToTask、updateTask等方法怎么用

svelte-gantt实例API完全参考selectTask、scrollToTask、updateTask等方法怎么用【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt在 Svelte 项目中使用 svelte-gantt 这个交互式甘特图/资源预约组件时创建实例后最常打交道的就是实例 API用selectTask程序化选中任务、scrollToTask快速滚动定位、updateTask动态新增或修改任务。本文面向新手把 svelte-gantt 实例上的常用方法与事件 API 一次讲清楚并附上来源文件位置方便按需查阅。一、创建 svelte-gantt 实例拿好你的 API 入口所有实例方法都挂在new SvelteGantt(...)返回的组件实例上。初始化只需两步传入props行、任务、时间范围等数据保存实例引用import { SvelteGantt, SvelteGanttTable, SvelteGanttDependencies } from svelte-gantt; const gantt new SvelteGantt({ target: document.getElementById(example-gantt), props: { rows: rows, tasks: tasks, from: startOfToday, to: endOfToday, ganttTableModules: [SvelteGanttTable], ganttBodyModules: [SvelteGanttDependencies] } });拿到实例后你会发现三样东西实例方法gantt.selectTask(...)、gantt.updateTask(...)等本文主角gantt.api事件对象如gantt.api.tasks.on.select(handler)gantt.$set(options)整体更新图表选项时间范围、列宽等配置项。实例方法的实现集中在组件主文件packages/svelte-gantt/src/Gantt.svelte完整方法签名类型定义在packages/svelte-gantt/src/gantt.ts事件体系在packages/svelte-gantt/src/core/api.ts。二、选中与取消选中selectTask / unselectTasksgantt.selectTask(3); // 按 id 选中任务 3 gantt.unselectTasks(); // 清空所有选中两个细节值得知道选中是排他的selectTask内部会先取消已有选中再选中目标任务逻辑见packages/svelte-gantt/src/core/selectionManager.ts手动点击也走同一套选中状态鼠标单击任务为单选按住 Ctrl 单击可切换多选。因此程序选中后用户点击其他任务选中态会被正常接管不会打架。典型场景列表页点击任务名称 → 甘特图自动高亮对应任务。三、滚动定位scrollToTask / scrollToRowgantt.scrollToTask(3, smooth); // 平滑滚动到任务 3 gantt.scrollToTask(7); // 默认 auto瞬间到位 gantt.scrollToRow(2, smooth); // 滚动到某一行这两个方法的滚动行为是只在不可见时才滚动任务已在视野内 → 不滚动不打扰用户任务在视野上方/左侧 → 滚动到刚好露出顶部/左缘任务在视野下方/右侧 → 滚动到刚好露出底部/右缘。scrollBehavior参数支持标准的auto或smooth第二个参数可以省略。实现位于packages/svelte-gantt/src/Gantt.svelte的scrollToTask函数可直接阅读其滚动判定逻辑。四、增删改数据updateTask、updateRow、removeTask这是实例 API 中用得最多的一组。它们与初始化时传props不同不需要重建组件图表会自动增量刷新。updateTask / updateTasks新增或更新upsert 语义gantt.updateTask({ id: 5001, label: 任务 #5001, from: Date.now(), to: Date.now() 3 * 60 * 60 * 1000, resourceId: 1, classes: orange });id已存在 → 更新该任务改时间、改标签、改颜色都行id不存在 → 当作新任务插入。一个真实用例配合外部拖放模块SvelteGanttExternal把页面按钮拖进甘特图即可创建任务demo 中的写法见packages/demo/src/routes/external/page.svelteconst external new SvelteGanttExternal(document.getElementById(new-task), { gantt, onsuccess: (row, date, gantt) { gantt.updateTask({ id: id, label: Task #${id}, from: date, to: date 3 * 60 * 60 * 1000, resourceId: row.model.id }); } });updateTasks(models)是批量版一次提交TaskModel[]数组updateRow(model)/updateRows(models)同理用于动态修改行资源数据。removeTask / removeTasks删除任务gantt.removeTask(5001); // 删除单个 gantt.removeTasks([1, 2, 3]); // 批量删除删除后所在行会自动重新布局无需手动刷新。五、查询数据getTask / getRow / getTasks三个只读方法直接返回内部实体对象方便在事件回调或业务逻辑中取值const task gantt.getTask(3); // 返回 SvelteTask含 model、left、width 等 const row gantt.getRow(1); // 返回 SvelteRow const tasks gantt.getTasks(1); // 返回该行上的任务数组注意id 不存在时返回nullgetTasks同理使用前建议判空。六、事件 APIgantt.api.tasks.on 全解析在gantt.api上按命名空间组织了三组事件全部采用on.事件名(回调)的订阅方式回调同步执行gantt.api.tasks.on.select((task) console.log(选中了, task));tasks命名空间任务交互| 事件 | 回调参数 | 触发时机 | | - | - | - | |move|task| 任务拖拽移动过程中持续触发 | |resize|task| 任务拖拽改变大小过程中触发 | |select|task| 用户选中任务含selectTask触发的选中 | |switchRow|task, row, previousRow| 任务被拖到另一行 | |moveEnd|task| 拖拽结束 | |change|{ task, sourceRow, targetRow, previousState }| 拖放落定、数据更新前| |changed| 同上 | 拖放落定、数据更新后| |dblclicked|task, MouseEvent| 双击任务 |gantt.api.gantt命名空间图表视图viewChanged缩放等视图变化、dateSelected表头选中时间段回调参数{ from, to }。gantt.api.timeranges命名空间clicked、resized、changed对应用于时间区间条的交互。取消订阅on返回一个函数调用它即可移除监听适合在组件销毁时清理。官方 demo 的完整事件用法可参考packages/demo/src/routes/events/page.svelte。七、实例方法速查表| 方法 | 参数 | 作用 | | - | - | - | |selectTask(id)| 任务 id | 选中指定任务 | |unselectTasks()| 无 | 清空选中 | |scrollToTask(id, behavior?)| 任务 idauto|smooth| 滚动到任务 | |scrollToRow(id, behavior?)| 行 id | 滚动到行 | |updateTask(model)| 任务对象 | 新增或更新任务 | |updateTasks(models[])| 任务数组 | 批量新增/更新 | |updateRow(model)| 行对象 | 新增或更新行 | |updateRows(models[])| 行数组 | 批量新增/更新行 | |removeTask(id)| 任务 id | 删除任务 | |removeTasks(ids[])| 任务 id 数组 | 批量删除任务 | |getTask(id)/getRow(id)| id | 获取任务 / 行实体 | |getTasks(rowId)| 行 id | 获取行上全部任务 |八、新手常见疑问Q1updateTask和gantt.$set({ tasks: [...] })有什么区别$set是整体替换选项通常用于改时间范围、列宽等配置updateTask是任务级增量操作只刷新受影响的任务和行大数据集下性能更好。增删改单个任务请优先用实例方法。Q2scrollToTask没有滚动目标任务已经在可视区域内时方法会故意不滚动。想要每次都强制居中的效果需要自己操作gantt.getMainContainer()之外的 DOM或改用$set调整from/to。Q3selectTask没反应传入的 id 必须在当前已加载的任务中存在方法内部查不到会静默跳过见Gantt.svelte中selectTask的判断。先用getTask(id)确认 id 正确。Q4拖拽完成后如何保存最新数据监听changed事件此时任务的from/to/resourceId已更新完毕直接把task.model同步到后端即可若需要在保存前校验或拦截则用change事件。掌握了以上方法svelte-gantt 实例 API 的日常使用场景基本全覆盖选中联动、滚动定位、动态增删改、事件监听都能在几行代码内完成。【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考