`
Goro
  • 浏览: 173528 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery 做成Task可重叠在一行的gantt干特图。

    博客分类:
  • Web
阅读更多
用了jQuery的gantt插件加了一个函数
JSGantt.makeInOneRow = function(groups){
  for(var i = 0; i < groups.length; i++){
    var group = groups[i];
    if(group && group.length > 1){
      var barWrapper = document.getElementById("childgrid_" + group[0]);
      for(var j = 1; j < group.length; j++){
        var bar = document.getElementById("bardiv_" + group[j]);
        barWrapper.appendChild(bar);
        //remove useless row
        var wrapper = document.getElementById("childgrid_" + group[j]);
        wrapper.parentNode.removeChild(wrapper);
      }
    }
  }
}


使用时
    g.AddTaskItem(new JSGantt.TaskItem(11,  'Define Variables',     '7/20/2008', '8/14/2008', 'ff00ff', 'http://help.com', 0, 'Brian',    60, 0, 1, 1, '','Caption 1'));
    g.AddTaskItem(new JSGantt.TaskItem(12,  'Define Variables',     '8/20/2008', '8/24/2008', 'ff00ff', 'http://help.com', 0, 'Brian',    60, 0, 1, 1, '','Caption 1'));
    
    
    g.AddTaskItem(new JSGantt.TaskItem(21,  'Define Variables',     '7/25/2008', '8/5/2008', 'ff00ff', 'http://help.com', 0, 'Brian',    70, 0, 2, 1, '','Caption 1'));
    g.AddTaskItem(new JSGantt.TaskItem(22,  'Define Variables',     '8/9/2008', '8/20/2008', 'ff00ff', 'http://help.com', 0, 'Brian',    70, 0, 2, 1, '','Caption 1'));

    g.AddTaskItem(new JSGantt.TaskItem(31,  'Define Variables',     '7/22/2008', '8/10/2008', 'ff00ff', 'http://help.com', 0, 'Brian',    30, 0, 3, 1, '','Caption 1'));

    g.Draw();	
    g.DrawDependencies();

    JSGantt.makeInOneRow([[11, 12],[21, 22],[31]]);


完整例子在附件里。
分享到:
评论

相关推荐

    jQuery Gantt 甘特图

    **jQuery Gantt 甘特图**是用于网页端项目管理和任务调度的一种可视化工具,它基于流行的JavaScript库jQuery构建。甘特图是一种条形图,能够清晰地展示项目的进度、任务开始与结束时间以及任务间的依赖关系,对于...

    jQuery-ganttView 资源甘特图

    **jQuery-ganttView** 是一个基于 **jQuery** 的开源项目,专用于创建资源甘特图。这个库使得在网页上展示项目进度、任务分配和时间线变得更加简单直观。它的设计目的是提供一种轻量级的解决方案,让开发者无需复杂...

    jQuery-gantt案例,下载即可用

    "jQuery-gantt"案例是利用JQuery库创建甘特图的一个实用示例,适合那些希望在Web应用中集成项目管理功能的开发者。 JQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。...

    JQuery Gantt-Demo

    JQuery Gantt-Demo是一个基于JQuery库的项目管理工具,用于展示甘特图,这是一种流行的数据可视化方式,尤其在项目管理和任务调度中广泛应用。甘特图通过条形图显示项目的时间线,使得用户可以清晰地看到各个任务的...

    jquery.gantt,js甘特图

    JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。它既可以图形化行程安排,也可以展示数据分布。使用方法:http://blog.csdn.net/kangrydotnet/article/details/42265539

    源自开源的甘特图组件jquery gantt 可拖拽

    jQuery Gantt是一款基于JavaScript库jQuery的开源甘特图组件,它允许开发者轻松地在网页上实现交互式的任务管理图表。 1. **jQuery Gantt组件介绍** jQuery Gantt是基于jQuery和HTML5的图表库,其设计目标是提供一...

    jQuery Gantt官方源码

    jQuery Gantt是一款基于jQuery库开发的甘特图插件,用于在Web应用中展示项目进度、任务关系和时间线。这个插件可以帮助开发者创建交互式的甘特图,以直观地展示项目的各个阶段、任务和时间分配。以下是关于jQuery ...

    jquery+layui+bootstrap+dhtmlxgantt开发任务进度处理的gantt图示例.rar

    本示例“jquery+layui+bootstrap+dhtmlxgantt开发任务进度处理的gantt图”结合了四个强大的技术工具,用于创建交互式、功能丰富的甘特图。以下是关于这些技术以及如何在实际开发中应用它们的知识点: 1. **jQuery**...

    jquery gantt

    "jQuery Gantt"是专为前端开发者设计的一个轻量级且可扩展的JavaScript组件,它允许用户在网页上创建交互式的甘特图。这个资源是一个经过修改的版本,与官方网站提供的原版可能有所不同。 jQuery库是JavaScript中最...

    jQuery.Gantt甘特图最小刻度精确到了小时,并带拖拽和调整大小功能

    jQuery.Gantt是基于JavaScript库jQuery的一个插件,专为创建交互式的甘特图而设计。这个插件的独特之处在于其最小的时间刻度精确到了小时,这使得对时间敏感的项目管理更为细致和精确。 jQuery.Gantt的拖拽和调整...

    jquery Gantt

    jQuery Gantt插件就是这样一个强大的工具,它能够帮助开发者创建交互式的甘特图,使得复杂的项目进度一目了然。本文将深入探讨jQuery Gantt的功能、用法以及如何在实际项目中应用。 **什么是甘特图?** 甘特图,以...

    JQUERY实现甘特图实例参考

    此实例包含三个:jquery.ganttView-master、mbielanczuk-jQuery.Gantt-v1.1.0、thegrubbsian-jquery.ganttView-0.8.2.0

    jquery.gantt例子和上传MPP所需的JAR

    在IT行业中,jQuery Gantt是一种常用的JavaScript库,用于创建交互式的甘特图,它能够清晰地展示项目的时间线和任务关系。本主题聚焦于“jquery.gantt例子和上传MPP所需的JAR”,这意味着我们将深入探讨如何利用...

    前端项目-jQuery.Gantt.zip

    3. **初始化组件**:在页面中指定一个元素作为甘特图的容器,并使用jQuery调用Gantt插件,传入预处理好的数据。 4. **事件监听**:可以通过挂载事件监听器来响应用户的交互操作,如任务的添加、修改和删除。 5. **...

    JQuery.Gantt 简单示例

    JQuery.Gantt,甘特图,js,组件,简单demo,可直接网页打开

    JQuery.Gantt 找了好久的例子

    JQuery.Gantt 解决了起始日期错位,末尾日期换行的问题,多个不同时间段甘特计划在同一行显示。 JQuery.Gantt 解决了起始日期错位,末尾日期换行的问题,多个不同时间段甘特计划在同一行显示。

    js做的干特图控件--dhtmlxGantt

    **js做的甘特图控件——dhtmlxGantt** dhtmlxGantt是一款基于JavaScript的开源甘特图控件,它允许开发者在Web应用程序中创建功能丰富的项目管理图表。这款控件支持任务的可视化展示,包括任务间的依赖关系、时间线...

    jQuery.Gantt-master.zip

    “jQuery是当前很流行的一个Java框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。 jQuery可以快速找到文档中的html元素,并对...JqueryGantt是其中一种,可用来绘制甘特图。

    jquerygantt轻量级的jQuery甘特图插件

    `jQuery Gantt`插件是专为jQuery框架设计的一个轻量级解决方案,它允许开发者轻松地创建交互式的甘特图,以展示时间线上的任务和进度。这个插件尤其适合那些希望在不引入庞大库的情况下实现甘特图功能的开发者。 ##...

Global site tag (gtag.js) - Google Analytics