jQuery甘特图/日程图/横道图/插件

2023-11-05

基于JQ的一款灵活高效,支持自定义拓展的甘特图/日程图插件

支持月/周/小时等显示方式 支持拖动改变时间 展开与收起 添加/删除,刷新 节假日高亮 clicked,dblClicked,changed事件 ...

调用方式:
$("#ganttChart").ganttView({
            ganttScale: "hours",// months  weeks days  hours
            showWeekends: true, //是否现在周末高亮
            showLine: true,//是否显示 当前时间线(为"周"时显示背景颜色)
            data: ganttData2, //数据来源
            vtHeaderWidth: 300,//左侧任务模块宽度
            cellWidth: 50, //格子宽度(ganttScale = hours/weeks:宽度重新计算 最小为50)
            cellHeight: 40,//格子行高
            titileHeight: 40,//标题行高
            start: new Date(2019, 06, 14), //范围最小时间(请根据 ganttScale 参数调节初始时间范围)
            end: new Date(2019, 06, 20), //范围最大时间
            slideWidth: '100%',//甘特图宽度
            excludeWeekends: true,//排除星期的最后一天
            showDayOfWeek: true,//是否显示星期
            showHolidays: false,//显示节假日
            excludeHolidays: false,//排除节假日
            gridHoverL:true,//是否显示鼠标移入效果(列)
            gridHoverH:true,//是否显示鼠标移入效果(行)
            isUnfold:true,//模块下任务超过2条 显示展开收起按钮
            unfoldConfig:false,//初始化展开/收起(模块下任务超过2条 显示展开收起按钮) true:收起
            clicked: function (o) {
                selectedObj = o;
                var data = selectedObj.data('block-data');
                var itemName = data.itemName ? data.itemName : "";
                var seriesName = data.seriesName ? data.seriesName : "";
                var text = data.text ? data.text : "";
                var sYYYY = data.start.getYear();
                sYYYY = sYYYY < 1000 ? sYYYY + 1900 : sYYYY;
                var sMM = data.start.getMonth() + 1;
                var sDD = data.start.getDate();
                var eYYYY = data.end.getYear();
                eYYYY = eYYYY < 1000 ? eYYYY + 1900 : eYYYY;
                var eMM = data.end.getMonth() + 1;
                var eDD = data.end.getDate();
                $('#ganttData-item-id').val(data.itemId);
                $('#ganttData-item-name').val(itemName);
                $('#ganttData-series-id').val(data.seriesId);
                $('#ganttData-series-name').val(seriesName);
                $('#ganttData-series-start').val(sYYYY + "/" + sMM + "/" + sDD);
                $('#ganttData-series-end').val(eYYYY + "/" + eMM + "/" + eDD);
                $('#ganttData-series-text').val(text);
                console.log(`${data.itemId} ${itemName} ${data.seriesId} ${seriesName} ${sYYYY + "/" + sMM + "/" + sDD} ${eYYYY + "/" + eMM + "/" + eDD}`)
            },

            dblClicked: function (o) {
                if (selectedObj == null) { return; }
                if (selectedObj.data('block-data').seriesId == o.data('block-data').seriesId) {
                    $('#ganttData-reset').trigger("click");
                }
            },
            changed: function (o) {
                o.trigger("click");
            }
  });
插件地址:https://github.com/WalkerHJ/GanttView 
注意事项:
  • 支持月,周,小时
  • 选择月时,注意调整start/end时间(时间月份默认从0开始)
  • 选择周/小时,插件自动忽略年份与月份
  • 插件支持模块下任务超过2条数据自动显示展开/收起按钮
  • 插件支持节假日Holidays表格高亮,excludeHolidays:true
  • cellWidth表格宽度(ganttScale = hours/weeks:宽度重新计算 最小为50) 避免未撑满整个屏幕
  • showLine是否显示当前时间节点(小时为线条展示,周/月为表格高亮)
  • 关于版本问题(jquery-ui-1.8.2/jquery-1.4.2)JQ版本可为高版本,JQ-ui版本暂不支持高版本
  • 图表上所有样式可自定义或取消
 

 

转载于:https://www.cnblogs.com/Beliefblog/p/11234335.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery甘特图/日程图/横道图/插件 的相关文章

  • 如何用js获取一个月的4个星期一?

    我正在构建一个图表 其中 x 轴应该是一个月的四个星期 我只想显示该月的四个星期一 我已经有了currentMonth和currentYear变量 而且我知道如何获取该月的第一天 我所需要的只是将一个月的四个星期一放入数组中 所有这些都在同
  • moment.calendar() 没有时间

    我想使用不带时间的 moment calendar 选项 所以而不是 上周二下午 5 点 我想要 上周二 有人知道 Moment 现在是否有解决方案吗 我找到了这个小提琴http jsfiddle net nawxZ http jsfidd
  • Google 地图查询返回的 JSON 包含像 \x26 这样的编码字符(如何解码?)

    在 Java 应用程序中 我获取 JSON 来自 Google 地图 其中包含以下字符 x26我想将其转换为其原始字符 据我所知 这是一个 UTF 8 表示法 但我不完全确定 在源 JSON 中 可能会出现各种编码字符 例如 x3c div
  • 如何检测不渲染 .png 透明的浏览器

    我有这段代码可以根据一周中的某一天渲染图像 但在 IE6 及更低版本以及可能其他一些浏览器中 它不会呈现 png 不透明度 所以我想稍微改变一下 这样它就会检测到不渲染 alpha 透明度的浏览器 并告诉他们加载这个图像 img horar
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 有什么方法可以在不重新加载的情况下更改标头 URL? [复制]

    这个问题在这里已经有答案了 可能的重复 修改URL而不重新加载页面 https stackoverflow com questions 824349 modify the url without reloading the page 使用新
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • JavaScript 逻辑赋值是如何工作的?

    在 javascript 中 如果我们有一些代码 例如 var a one var b q a alert b 逻辑 OR 运算符会将 a 的值分配给 b 并且警报将为 一 这仅限于作业还是我们可以在任何地方使用它 似乎空字符串被视为与未定
  • JQuery 可排序嵌套可排序 div

    这个问题与这个有关Nest jQuery UI 可排序 https stackoverflow com questions 19129476 nest jquery ui sortables 但我无法解决我的问题 问题是 我有一个包含项目的
  • 无法读取setInterval(Hooks)中的最新状态变量[重复]

    这个问题在这里已经有答案了 我想这是因为 JS 的工作原理 但我想你不会在类中遇到这个问题 在此代码中 let open setOpen React useState false let counter setCounter React u
  • 在js中检测浏览器的最佳方法

    JavaScript 中有很多浏览器检测方法 据我所知 使用navigator userAgent或检测特征 例如XMLHttpRequest 等等 谁能告诉我哪种方法最好 最有效 如果你真的需要知道什么browser他们正在使用 你主要需
  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu
  • 动态地将 .on() 方法与事件映射绑定

    我使用此语法来确保事件绑定动态添加li元素 ul list on click li function do something 我尝试使用这样的事件映射来存档相同的内容 ul list hammer css hacks false on s
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 我将 X Y Z 坐标转换为屏幕 X Y 坐标有什么问题吗?

    我正在制作 3D 空间中弹跳的球体的 HTML5 Canvas 演示 这非常简单 每个球都有 X Y 和 Z 坐标 然后 这些坐标将转换为我在此处阅读的屏幕 X 和 Y 坐标 http answers google com answers
  • 未处理的承诺拒绝:Zone.js 检测到 ZoneAwarePromise `(window|global).Promise` 已被覆盖

    我尝试将 Angular2 快速入门代码合并到我当前的 webpack 构建中 似乎有些东西正在覆盖zone js抛出此错误的承诺 根据我见过的大多数 stackoverflow 帖子 zone js文件需要在任何可能包含承诺的文件之后加载
  • 替换打字稿中字符串中字符的所有实例?

    我正在尝试用 x 字符替换电子邮件中的所有句号 例如 电子邮件受保护 cdn cgi l email protection 将变为 myxemail emailxcom 电子邮件设置为字符串 我的问题是它不只是替换句号 而是替换每个字符 所
  • 在 Javascript 中创建数组

    我对 javascript 不太熟悉 并且在用 javascript 制作 2d 或者也许我可能需要 3d 数组时遇到了一些麻烦 我目前需要收集 2 条信息 一个 ID 和一个值 因此我创建了以下内容 var myArray var id
  • 如何用时刻找到与给定时间最接近的时间?

    所以我有一个简单的代码 一个工作代码 它使用 moment 获取最接近给定时间的时间 Current time in millis const now moment 10 16 HH mm format x List of times co

随机推荐

  • PCL 半径滤波(C++详细过程版)

    半径滤波 一 概述 二 代码实现 三 结果展示 1 原始点云 2 滤波结果 一 概述 半径滤波在PCL里有现成的调用函数 具体算法原理和实现代码见 PCL 半径滤波器 之所以要写算法详细实现过程是为了对算法进行改进 二 代码实现 inclu
  • java--基础--22--Lambda

    java 基础 22 Lambda 代码 https gitee com DanShenGuiZu learnDemo tree mysql mybaties DB jdk8 learn 1 组成Lambda表达式的三要素 形式参数 箭头
  • unity获取脚本组件_Unity小练习学C#之获取Animator组件并控制

    本人是C 初学者 可能有些说法不太合适 请各位多多指教 希望在你们的指导中快速成长 本次目标 能使用UI Button 控制角色的动画状态切换 Unity小练习学C 之获取Animatorhttps www zhihu com video
  • 什么是Linux系统

    一 什么是Linux系统 系统简介 Linux 全称GNU Linux 是一套免费使用和自由传播的类Unix操作系统 是一个基于POSIX的多用户 多任务 支持多线程和多CPU的操作系统 伴随着互联网的发展 Linux得到了来自全世界软件爱
  • 在服务器上搭建网站

    我们购买云服务器后 进入服务器windows界面 会有几个个重要的系统软件 其中有FileZillaServerInterface 和 Internet信息服务 ISS 管理器 FileZillaServerInterface 是用来与FT
  • Orangepi Zero2——系统启动及wiringPi外设SDK安装

    文章目录 平台介绍 刷机和系统启动 工具 登录 串口登录 修改登录密码 网络配置 串口登录下修改内核日志输出级别 SSH登录开发板 基于官方外设开发 wiringPi外设SDK安装 平台介绍 配置图 背面图 引脚功能图 特性 CPU 全志H
  • Matlab中的傅里叶级数展开函数

    今天在用Matlab 2012b 计算的时候发现其中的函数库没有直接提供傅里叶级数展开的函数 就自己搞了一个 function A B F fseries f x n a b 用于求解函数的傅里叶级数展开 if nargin 3 a pi
  • .ply模型格式解析与Loader编写

    格式介绍 PLY作为一种多边形模型数据格式 不同于三维引擎中常用的场景图文件格式和脚本文件 每个PLY文件只用于描述一个多边形模型对象Object 该模型对象可以通过诸如顶点 面等数据进行描述 被统称作元素Element PLY的文件结构是
  • Matlab:数模03-灰色预测

    文章目录 关于灰色预测模型 累加生成 GM 1 1 模型 GM 1 1 模型的精度检验 Matlab代码 数据测试 01 数据测试 02 用途 关于灰色预测模型 累加生成 在累加生成的基础上 我们建立了GM 1 1 模型 GM 1 1 模型
  • 极大似然估计和最大后验估计

    https baijiahao baidu com s id 1593811166204755239 wfr spider for pc 机器学习中 一般只得到业务产生的数据集D 机器学习目的是通过数据D了解该项业务的过去 建模 和未来 预
  • C#学习教程之三

    C 类是一种数据结构 它可以封装数据成员 函数成员和其他的类 类是创建对象的模版 C 的一切类型都是类 所有的语句都必须位于类内 不存在任何游离于类外的语句 因此 类是C 语言的核心和基本构成模块 C 类 类是从实际对象中抽象出来的一种完整
  • mybatis整合spring之mapperLocations和typeAliasesPackage(mapper-locations和type-aliases-package)

    Spring整合
  • reactnative textinput禁止弹出键盘_定了!这个考试禁止携带计算器!证券从业考试可以带吗?(附计算器使用汇总)...

    hi 大家好 我是大咖罗 都说考证是赶早不赶晚 考试政策的变化总是来得猝不及防 01 会计中级考试 禁止携带计算器 前不久 财政部紧急发布 关于修订印发 全国会计专业技术资格考试考场规则 等文件的通知 通知中明确 携带准考证和有效居民身份证
  • linux 时间通知链机制,linux内核的通知链机制

    一 为什么需要通知链 linux内核的各个子系统之间往往互相关联 一个子系统产生或者侦测到的事件 其它的子系统往往也很感兴趣 因此linux内核采用了通知链机制实现内核的子系统之间的通信需求 值的注意的是 通知链机制仅用于内核内部的子系统之
  • 三阶魔方自动还原 vc实现

    魔方自动求解程序一般有两种方法 一种是按照人还原魔方的步骤 一步步来 另外一种是使用数学方法 魔方自有一套复杂的数学理论 其中较著名的是两阶段算法 压缩文件中的cube430 exe使用的就是数学方法 程序作者便是two phase算法发明
  • BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)

    一 介绍 BurpSuite是渗透测试 漏洞挖掘以及Web应用程序测试的最佳工具之一 是一款用于攻击web 应用程序的集成攻击测试平台 可以进行抓包 重放 爆破 包含许多工具 能处理对应的HTTP消息 持久性 认证 代理 日志 警报 二 工
  • 使用Cobra开发自己的命令行工具

    Cobra 项目地址 https github com spf13 cobra 1 新建cobra项目 安装cobra cli工具 go install github com spf13 cobra cli latest 新建项目目录 mk
  • 扫盲-----addEventlistener()方法,事件监听(一)

    一 扫盲事件起因 时间 2018年6月1日周五下午 原本我以为我已经把当前的bug改好 应该没啥问题了 坐等下班公司聚餐 开心 突然 隔壁同组大哥 哎 cp 你看看 你这个首页报了很多错哎 我的第一反应就是 不可能 怎么会有错误呢 我明明都
  • osgEarth的Rex引擎原理分析(七十二)如何从高程影像变成高程网格

    目标 七十一 中的问题143 有两种方法 1 对高程影像进行采样 用采样值来设置高程 通过CPU实现 2 通过着色器来实现 在GPU上进行操作 待继续分析列表 9 earth文件中都有哪些options 九 中问题 10 如何根据earth
  • jQuery甘特图/日程图/横道图/插件

    基于JQ的一款灵活高效 支持自定义拓展的甘特图 日程图插件 支持月 周 小时等显示方式 支持拖动改变时间 展开与收起 添加 删除 刷新 节假日高亮 clicked dblClicked changed事件 调用方式 ganttChart g