用甘特图显示To Do

aki发表于:2016年10月05日 15:01:00更新于:2017年08月07日 17:24:00

Index

概 要

此范例介绍如何使用甘特图显示To Do应用的记录列表。

  • 在记录列表页面,当有可显示的记录时才显示甘特图。

  • 甘特图根据优先度字段的值显示不同的颜色。

  • 年月日根据用户设置的语言自动切换显示。

其他详细内容请查看程序。

完成图

事前准备

  • 表单设置详情如下:

    字段名称

    字段类型

    字段代码

    ToDo名称

    单行文本框

    To_Do

    负责人

    选择用户

    Assignees

    优先顺序

    下拉菜单

    Priority

    截止日

    日期

    Duedate

    开始日

    日期

    From

    结束日

    日期

    To

    附件

    附件

    Attachments

       ※优先顺序的选项:A、B、C、D、E、F
       ※其他字段任意设置

  • 编辑器
    选择符合自己使用习惯的文本编辑器。

程序范例

通过本应用程序范例来介绍Cybozu CDN 的使用方法,以及 JavaScript和 CSS 的写法。

注意事项

  • 直接使用此处提供的程序范例的情况,才望子不予以保证程序的正常运行

  • 才望子不提供对程序范例的技术支持

PC专用的JavaScript文件

在应用设置页面打开【通过JavaScript / CSS自定义】,从Cybozu CDN 中选择以下库。

  • jQuery
    https://js.cybozu.com/jquery/2.1.1/jquery.min.js  (使用version 2.1.1)

  • jQuery.Gantt
    https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js (使用version 20140623)

JavaScript 范例

  • 将以下代码拷贝到编辑器,文件命名为【sample-ganttchart.js】,文字编码设为【UTF-8】、无BOM,保存
    ※文件名任意,但是文件的扩展名要指定为【js】

PC专用的CSS文件

在应用设置页面打开【通过JavaScript / CSS自定义】,从Cybozu CDN 中选择以下库。

  • jQuery.Gantt
    https://js.cybozu.com/jquerygantt/20140623/css/style.css (使用version 20140623)

CSS范例

为了使颜色更加丰富,自己指定了颜色。省略的话程序也可以正常运行。

  • 将以下代码拷贝到编辑器,文件命名为【sample-addin.css」】,文字编码设为【UTF-8】、无BOM,保存
    ※文件名任意,但是文件的扩展名要指定为【css】

设置的页面

以下是【通过JavaScript / CSS自定义】页面的设置范例。

JavaScript / CSS 文件的设置如上图。
返回应用的首页,添加记录,确认自定义的结果是否正常。

使用的API

  1. 添加事件句柄

  2. 获取字段元素

  3. 获取设计版本

  4. 获取用户信息


    您需要登录后才可以回复