vis-timeline-graph2d实现时间线交互排班安排表效果代码-html代码-BFW代码库

vis-timeline-graph2d实现时间线交互排班安排表效果代码

代码语言：html

所属分类：图表

代码描述：vis-timeline-graph2d实现时间线交互排班安排表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
  <head>
    <title>Timeline | interaction | Sequential Selection</title>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis-timeline-graph2d.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis-timeline-graph2d.min.css">
    <style>
      body,
      html {
        font-family: arial, sans-serif;
        font-size: 11pt;
      }

      .vis-item.vis-background.negative {
        background-color: rgba(255, 0, 0, 0.2);
      }
      .vis-item.vis-background.positive {
        background-color: rgba(105, 255, 98, 0.2);
      }
      .vis-item.vis-background.marker {
        border-left: 2px solid green;
      }

      table {
        border: 1px solid gray;
      }

      td {
        text-align: center;
      }

      code {
        padding: 2px 4px;
        font-size: 90%;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <p>This example shows the sequential selection option.</p>
    <p>
      When <code>sequentialSelection</code> is true, then only sequential items are allowed to be selected (no
      gaps).
    </p>
    <table>
      <thead>
        <tr>
          <th>Option</th>
          <th>Status</th>
          <th>Toggle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>sequentialSelection</code></td>
          <td id="seq">true</td>
          <td><button onclick="toggleSequentialSelection()">Toggle</button></td>
        </tr>
      </tbody>
    </table>
    <br />

    <div id="visualization"></div>

    <script>
      // create a dataset with items
      // we specify the type of the fields `start` and `end` here to be strings
      // containing an ISO date. The fields will be outputted as ISO dates
      // automatically getting data from the DataSet via items.get().
      var items = new vis.DataSet({
        type: { start: 'ISODate', end: 'ISODate' }
      });
      var groups = new vis.DataSet([
        {
          id: 'bar',
          content: 'bar',
          subgroupStack: { sg_1: true, sg_2: true, sg_3: true },
          subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }
        },
        {
          id: 'foo',
          content: 'foo',
          subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
        }
      ]);
      // add items to the DataSet
      items.add([
        { id: 'A', start: '2014-01-20', end: '2014-01-22', type: 'background', group: 'foo' },
        {
          id: 'B',
          start: '2014-01-22',
          end: '2014-01-23',
          type: 'background',
          group: 'foo',
          className: 'negative'
        },
        { id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22', group: 'foo' },

        {
          id: 'SG_1_1',
          start: '2014-01-25',
          end: '2014-01-27',
          type: 'background',
          group: 'bar',
          subgroup: 'sg_1',
          subgroupOrder: 0
        },
        {
          id: 'SG_1_2',
          start: '2014-01-26',
          end: '2014-01-27',
          type: 'background',
          className: 'positive',
          group: 'bar',
          subgroup: 'sg_1',
          subgroupOrder: 0
        },
        {
          id: 1,
          content: 'subgroup0_1',
          start: '2014-01-23T12:00:00',
   .........完整代码请登录后点击上方下载按钮下载查看