关于kintone表格的基本操作（添加/更新/删除行） - cybozu

开发者中心包含此范例模板（表格操作技巧），请前往开发者中心下载学习。

kintone中，具有代表性的便利工具之一要属表格了。但用JavaScript自定义对表格进行自定义开发时，代码嵌套层次太深，不太好懂。这里就向大家讲解一下表格的结构及操作方法。

表格的操作方法

表格的结构

表格的结构有点复杂，为了让大家更加好理解，下面我们用图来讲解。如对表格结构有疑惑时可以拿它来参考。
特别要注意的是表格对象内三个嵌套层有value。
接下来就让我们一起来看一下实际的对象（省略了表格以外的字段）。

内含表格的记录对象的结构

0015e8c186b6ad5a960021168df1887

{
  "表格": {
    "type": "SUBTABLE",
    "value": [
      {
        "id": "1923",
        "value": {
          "行编号": {
            "type": "NUMBER",
            "value": "1"
          },
          "单行文本框": {
            "type": "SINGLE_LINE_TEXT",
            "value": "文本1"
          },
          "复选框": {
            "type": "CHECK_BOX",
            "value": [
              "sample1"
            ]
          }
        }
      },
      {
        "id": "1925",
        "value": {
          "行编号": {
            "type": "NUMBER",
            "value": "2"
          },
          "单行文本框": {
            "type": "SINGLE_LINE_TEXT",
            "value": "文本2"
          },
          "复选框": {
            "type": "CHECK_BOX",
            "value": [
              "sample2"
            ]
          }
        }
      }
    ]
  }
}

应用范例：表格操作

为了方便大家确认执行结果，这里准备了应用模板。请点击下载后，上传到您的kintone环境。关于用模板创建应用的方法请参考通过导入模板文件创建应用。

然后将以下代码另存为js文件，上传到以上应用的“通过JavaScript/CSS自定义”页面里。
在记录添加页面，您可以通过点击“添加”、“更新”、“删除”按钮来添加、更新、删除表格的行，以此确认各种情况的代码的执行结果。

点击“添加”按钮时，将“添加_单行文本框”以及“添加_复选框”内的值添加到表格
点击“更新”按钮时，将根据“更新_行编号”里指定的行编号，把“更新_单行文本框”和“更新_复选框”的值更新到表格内相应行的相应字段。
点击“删除”按钮时，将根据“删除_行编号”里指定的编号删除相应的行。

0015e8fde8326237354e12bfe07ed99

(function() {
    "use strict";
    kintone.events.on(["app.record.create.show", "app.record.edit.show"], function(e) {
        
        // 设置添加按钮
        const addSpace = kintone.app.record.getSpaceElement('addSpace');
        const addButton =  document.createElement('button');
        addButton.innerHTML = '添加';
        addButton.onclick = addRow;
        addSpace.appendChild(addButton);
        
        // 设置更新按钮
        const updateSpace = kintone.app.record.getSpaceElement('updateSpace');
        const updateButton =  document.createElement('button');
        updateButton.innerHTML = '更新';
        updateButton.onclick = updateRow;
        updateSpace.appendChild(updateButton);
        
        // 设置删除按钮
        const deleteSpace = kintone.app.record.getSpaceElement('deleteSpace');
        const deleteButton =  document.createElement('button');
        deleteButton.innerHTML = '删除';
        deleteButton.onclick = deleteRow;
        deleteSpace.appendChild(deleteButton);
    });
    
  // 添加行的函数
  function addRow() {
    const record = kintone.app.record.get().record;
    const addText = record.添加_单行文本框.value;
    const addCheckBox = record.添加_复选框.value;
    record.表格.value.push({
      value: {
        "行编号": {
          value: '',
          type: 'NUMBER',
        },
        "单行文本框": {
          value: addText,
          type: 'SINGLE_LINE_TEXT',
        },
        "复选框": {
          value: addCheckBox,
          type: 'CHECK_BOX',
        }
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  }

  // 更新行的函数
  function updateRow() {
    const record = kintone.app.record.get().record;
    const updateText = record.更新_单行文本框.value;
    const updateCheckBox = record.更新_复选框.value;
    const targetRowNo = record.更新_行编号.value;
    record.表格.value.forEach(function(row) {
      if (row.value.行编号.value === targetRowNo) {
        row.value.单行文本框.value = updateText;
        row.value.复选框.value = updateCheckBox;
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  }

  // 删除行的函数
  function deleteRow() {
    const record = kintone.app.record.get().record;
    const targetRowNo = record.删除_行编号.value;
    record.表格.value.forEach(function(row, i) {
      if (row.value.行编号.value === targetRowNo) {
        record.表格.value.splice(i, 1);
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  }
  
  // 更新行编号的函数
  function resetRowNo(record) {
    record.表格.value.forEach(function(row, i) {
      row.value.行编号.value = i + 1;
    });
  }
})();

JavaScript自定义代码详解

上面的JavaScript自定义分“在空白栏内配置按钮”和“添加/更新/删除表格行”两部分。
本次以表格为中心进行讲解，关于空白栏部分的处理请参考以下文章。

第 3篇在记录详细页面上设置个按钮！

0015e9589b330d7ae6d6d0ece3e8085

以下是各部分的解说。

配置按钮部分

这部分包含了配置按钮和点击按钮时的设置。
比如，点击“添加”按钮后执行“添加行”的函数。

addButton.onclick = addRow;

添加行处理

表格用数组表示，在JavaScript里添加行就是在数组后面添加值。
要给数组添加值，用到的是 .push()。
在 .push() 中，指定与表中的行所相对应的值。

这时候，表内所有字段的字段代码，type和value值也必须要给出。

以下是添加一行的例子

record.表格.value.push({
      value: {
        "行编号": {
          value: 1,
          type: "NUMBER",
        },
        "单行文本框": {
          value: "文本",
          type: "SINGLE_LINE_TEXT",
        },
        "复选框": {
          value: ["sample1"],
          type: "CHECK_BOX",
        }
      }
    });