`
a420144030
  • 浏览: 81524 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

甘特图

jQueryCSSJavaScriptUI项目管理 
阅读更多

项目进度管理最直观的展现就是甘特图，最近项目需求要在网页中安排任务，管理进度等，故研究了一下甘特图，在网上找到一个关于jQuery做甘特图的插件，写的非常好。

具体地址如下：http://github.com/thegrubbsian/jquery.ganttView

不过该甘特图插件没有现成编辑功能，故有找到一个改版：

http://github.com/nkmrshn/jquery.ganttView

改版后的甘特图可以编辑功能，效果图如下：

 



 

具体使用方法如下：

1. 下载文件，目录结果如下：

/example
/lib
jquery.ganttView.js
jquery.ganttView.css

 

2. 代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Gantt</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="example.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../jquery.ganttView.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../lib/flick/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="../lib/date.js"></script>
<script type="text/javascript" src="../lib/holidays.js"></script>
<script type="text/javascript" src="../jquery.ganttView.js"></script>
<script type="text/javascript">
    $(function () {
        var ganttData = [
            {id: 1, name: "タスク1", series: [
                {id: 1, name: "担当者1", text: "Test1-1", start: new Date(2010,00,02), end: new Date(2010,00,05), readOnly: true},
                {id: 2, name: "担当者2", text: "Test1-2", start: new Date(2010,00,02), end: new Date(2010,00,05)}
            ]},
            {id: 2, name: "タスク2", series: [{id: 3, name: "担当者2", text: "Test2", start: new Date(2010,00,05), end: new Date(2010,00,08)}]},
            {id: 3, name: "タスク3", series: [{id: 4, name: "担当者3", start: new Date(2010,00,09), end: new Date(2010,00,12)}]},
            {id: 4, name: "タスク4", series: [{id: 5, name: "担当者4", start: new Date(2010,00,02), end: new Date(2010,00,08), readOnly: true}]},
            {id: 5, name: "タスク5", series: [{id: 6, name: "担当者5", start: new Date(2010,00,08), end: new Date(2010,00,15)}]}
        ];

        var selectedObj = null;

        $("#ganttChart").ganttView({
            showWeekends: true,
            data: ganttData,
            cellWidth: 21,
            start: new Date(2010,00,01),
            end: new Date(2010,05,15),
            slideWidth: 600,
            excludeWeekends: true,
            showDayOfWeek: true,
            showHolidays: true,
            excludeHolidays: 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);

            },
            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");
            }
        });

        $('#ganttData-add').click(function () {
            var name = $('#ganttData-series-name').val();
            name = (name == "") ? null : name;

            var text = $('#ganttData-series-text').val();
            text = (text == "") ? null : text;

            var start = $('#ganttData-series-start').val().split("/");
            var end = $('#ganttData-series-end').val().split("/");

            var data = [{
                id: parseInt($('#ganttData-item-id').val()),
                name: $('#ganttData-item-name').val(),
                series: [{
                    id: parseInt($('#ganttData-series-id').val()),
                    name: name,
                    text: text,
                    start: new Date(start[0], parseInt(start[1]) - 1, start[2]),
                    end: new Date(end[0], parseInt(end[1]) - 1, end[2]),
                }]
            }];

            $().ganttView.addData(data);
                   
        });

        $('#ganttData-refresh').click(function () {
            if (selectedObj == null) { return; }

            var data = selectedObj.data('block-data');
            data.itemName = $('#ganttData-item-name').val();
            data.seriesName = $('#ganttData-series-name').val();

            var start = $("#ganttData-series-start").val().split("/");
            data.start = new Date(start[0], parseInt(start[1]) - 1, start[2]);

            var end = $("#ganttData-series-end").val().split("/");
            data.end = new Date(end[0], parseInt(end[1]) - 1, end[2]);

            data.text = $('#ganttData-series-text').val();

            selectedObj.refreshGanttData();
        });

        $('#ganttData-delete').click(function () {
            if (selectedObj == null) { return; }

            selectedObj.deleteGanttData(selectedObj);
            $('#ganttData-reset').trigger("click");
        });

        $('#ganttData-reset').click(function () {
            selectedObj = null;
            $('.ganttData-input input').val("");
        });
    });
  </script>
</head>
<body>
<div id="ganttChart"></div>
<br/>
<div id="ganttData">
    <div class="ganttData-item">
        <div class="ganttData-header">Item ID</div>
        <div class="ganttData-input"><input type="text" id="ganttData-item-id" /></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Item Name</div>
        <div class="ganttData-input"><input type="text" id="ganttData-item-name" /></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Series ID</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-id" /></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Series Name</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-name" /></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Start</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-start" /></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">End</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-end" /></div>
    </div>
    <div class="ganttData-item">
        <div class="ganttData-header">Series Text</div>
        <div class="ganttData-input"><input type="text" id="ganttData-series-text" /></div>
    </div>
    <div class="ganttData-item">
        <input type="button" id="ganttData-reset" value="リセット" />
        <input type="button" id="ganttData-add" value="追加" />
        <input type="button" id="ganttData-refresh" value="更新" />
        <input type="button" id="ganttData-delete" value="削除" />
    </div>
</div>
</body>
</html>

 以上代码在/example/index.html 中。

  • 大小: 16.8 KB
分享到：
| Rails-3 Active Support 核心扩展
评论
3 楼 godson_2003 2017-02-08  
附件和实例不符
2 楼 xf326521 2014-05-11  
最近也要做甘特图 膜拜下
1 楼 xf326521 2014-05-11  
300多下载 没人回复楼主 
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    各种Excel甘特图模板30几个特别全

    各种甘特图Excel模板，项目管理，工作进度，培训进度，计划安排等，不用您自己去制作表格，一批模板供您选择，极大地提高您的工作效率 各种甘特图Excel模板，项目管理，工作进度，培训进度，计划安排等，不用您自己...

    甘特图，用于项目计划等

    甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等甘特图，用于项目计划等...

    vue2实现可拖拽甘特图（结合element-ui的gantt图）

    接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求...

    甘特图，可以拖拽甘特图模块。

    甘特图可以拖拽，有一个demo。

    工作计划进度甘特图16份打包.zip

    Excel自动甘特图模板.xlsx HR实施计划甘特图Excel模板.xls 个人计划甘特图Excel模板.xlsx 企业甘特图excel模板.xlsx 全自动甘特图excel模板.xlsx 客户投诉处理进度甘特图Excel模板.xlsx 工程施工时间进度表甘特图...

    可拖拽的甘特图控件（完整）

    以表格和任务滑块的组合实现甘特图的外观效果，可拖动或伸缩任务滑块，实现动态、可视化地调整任务的时间属性。欢迎有相关需求的朋友下载试用。 安装方法：解压得到控件的bpl文件和dcus文件夹，运行DELPHI7，选择...

    DevExpress 甘特图Demo

    DevExpress 的甘特图Demo。 功能示例，以及数据联动处理。

    甘特图_甘特图_生产计划_生产排程_

    3、可以自由设置3D、更改甘特图大小，是否让用户移动甘特图等效果属性设置。 gant3dgantchangedgantmoved这三个属性来控制。4、该甘特图不用设置颜色，会随机获取颜色，并把相同模号的颜色设置为一样。 当用鼠标点击...

    C#甘特图实现

    C#甘特图案例，甘特图实现，可以满足一定需求，还有很多地方需要完善，有兴趣的朋友可以来研究一下。顺便能把完善好的代码发给我更是感激不尽。 邮箱daoxunchang@Foxmail.com

    Delphi甘特图，甘特图控件源码及应用..rar

    Delphi甘特图，甘特图控件源码及应用..rar

    JAVA 生成甘特图

    纯JAVA编写的甘特图，实现多种功能，可实现WEB展示。

    各类excel甘特图模板

    各类excel甘特图模板

    KDChart-kdchart-2.6.2-release(1)_qt甘特图开源三方KDChart_甘特图_kdchart_

    KDChart 三方库 用于甘特图绘制，学习一下

    甘特图实现 HTML+CSS

    左侧为任务列表，右侧是甘特图，可以修改任务列表，左右同步 是打包后的，请自行搭建静态服务器查看

    VB甘特图控件

    甘特图控件，形象且直观.Active控件

    js实现前端甘特图.zip

    基于dhtml实现甘特图展示

    qt实现甘特图源码

    源码中含有使用QT实现甘特图的控件

    甘特图软件（Gantt chart ）

    甘特图（Gantt chart ）又叫横道图、条状图(Bar chart)。它是以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。它是在第一次世界大战时期发明的，以亨利·L·甘特先生的名字命名，...

    龙博甘特图控件(Web版)

    龙博甘特图控件(Web版)源码 特图（Gantt chart ）又叫横道图、条状图(Bar chart)。它是以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。 Ext Gantt甘特图是基于Extjs核心库的开发...

    甘特图Chart控件适用VB

    甘特图Chart控件适用VB

Magicbox
Global site tag (gtag.js) - Google Analytics