JavaScriptでガントチャートが作れる！「ガントシート」の使い方（2）

{
  "tasks": [
    {
      "id": "1",
      "parentId": null,
      "taskNumber": 1,
      "name": "要件定義",
      "duration": "6 days",
      "predecessors": "",
      "assignments": "1,3",
      "cost": 100,
      "pic": "正門 恵子"
    },
    {
      "id": "2",
      "parentId": 1,
      "taskNumber": 2,
      "name": "社内関係者ヒアリング",
      "duration": "1 day",
      "predecessors": "",
      "assignments": "1",
      "cost": 200,
      "pic": "正門 恵子"
    },
    {
      "id": "3",
      "parentId": 1,
      "taskNumber": 3,
      "name": "要求事項の細分化",
      "duration": "5 days",
      "predecessors": "2",
      "assignments": "1",
      "cost": 200,
      "pic": "青木 俊之"
    }
  ]
}

 json-server tasks.json -p 3000

・・・（中略）・・・
function initGanttSheet(spread) {
    var apiUrl = "http://localhost:3000/tasks";
    var dataManager = spread.dataManager();
    var myTable1 = dataManager.addTable("myTable1", {
        //data: getData(),
        batch: true,
        remote: {
            read: { url: apiUrl },
            batch: function (changes) {
                return sendRequest(apiUrl, { body: changes });
            }
        },
        schema: {
・・・（中略）・・・

・・・（中略）・・・
function sendRequest(url, options) {
    // リクエストのコンテンツ種別をJSONに設定します
    options.headers = { 'Content-Type': 'application/json; charset=utf-8' };
    // 更新時の処理
    for (const item of options.body) {
        if (item.type == "insert") {
            // sourceIndexからidを設定
            item.dataItem.id = (item.sourceIndex + 1).toString();
            if (item.sourceParentIndex) {
                item.dataItem.parentId = item.sourceParentIndex + 1;
            }
            // 登録のリクエストを送信します
            const params = { method: "POST", body: JSON.stringify(item.dataItem) };
            fetch(url + "/", params).then(resp => resp.json())
                .then(data => console.log(data));
        }
        else if (item.type == "update") {

            // 更新のリクエストを送信します
            const params = { method: "PUT", body: JSON.stringify(item.dataItem) };
            fetch(url + "/" + item.dataItem.id, params).then(resp => resp.json())
                .then(data => console.log(data));
        }
        else if (item.type == "delete") {

            // 削除のリクエストを送信します
            const params = { method: "DELETE"};
            fetch(url + "/" + item.dataItem.id, params).then(resp => resp.json())
                .then(data => console.log(data));
        }
    }
    alert("タスクを更新しました。");
}

・・・（中略）・・・
    <div class="sample-tutorial">
        <div id="ss" class="sample-spreadsheets"></div>
    </div>
    <div class="btn-container" >
        <button id="update" class="btn">更新</button>
    </div>
・・・（中略）・・・

・・・（中略）・・・
    document.getElementById('update').addEventListener('click', function () {
        // すべての変更を保存する
        ganttSheet.submitChanges();
    });
}
・・・（中略）・・・

・・・（中略）・・・
.btn-container{
   position: fixed;
   bottom: 40px;
   right: 5px;
   padding: 6px 40px;
   z-index:1
}

.btn{
   padding: 6px 40px;
   font-size: 16px;
}

function initGanttSheet(spread) {
・・・（中略）・・・
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" },
                pic: {
                    dataMap: { "正門 恵子": "正門 恵子", "青木 俊之": "青木 俊之", "森上 偉久馬": "森上 偉久馬", "成宮 真紀": "成宮 真紀", "松沢 誠一": "松沢 誠一" },
                    lookup: ["正門 恵子", "青木 俊之", "森上 偉久馬", "成宮 真紀", "松沢 誠一"]
                },
            }
・・・（中略）・・・