`
Goro
  • 浏览: 172372 次
  • 性别: 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 gantt

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

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

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

    jquery Gantt

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

    前端项目-jQuery.Gantt.zip

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

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

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

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

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

    JQuery.Gantt 简单示例

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

    JQuery.Gantt 找了好久的例子

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

    JQUERY实现甘特图实例参考

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

    js做的干特图控件--dhtmlxGantt

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

    dhtmlxGantt 介绍以及使用说明

    dhtmlxGantt 是一款基于 JavaScript 的强大甘特图组件库,它属于 dhtmlxSuite 中的一部分。该组件库提供了创建交互式甘特图所需的所有工具,非常适合于项目管理和任务跟踪应用的开发。dhtmlxGantt 的主要优势在于其...

    HTML5使用jquery.fn.gantt.js生成甘特图.rar

    带动态提示的HTML5甘特图,HTML5使用jquery.fn.gantt.js生成甘特图,测试请在服务器环境下,请不要双击HTML打开,或者直接用火狐打开,这样看不到效果,本甘特图带有鼠标悬停提示效果。

Global site tag (gtag.js) - Google Analytics