中文
开发者中心包含此范例模板（表格操作技巧），请前往开发者中心下载学习。
kintone中，具有代表性的便利工具之一要属表格了。但用JavaScript自定义对表格进行自定义开发时，代码嵌套层次太深，不太好懂。这里就向大家讲解一下表格的结构及操作方法。
表格的操作方法
表格的结构
表格的结构有点复杂，为了让大家更加好理解，下面我们用图来讲解。如对表格结构有疑惑时可以拿它来参考。
特别要注意的是表格对象内三个嵌套层有value。
接下来就让我们一起来看一下实际的对象（省略了表格以外的字段）。
内含表格的记录对象的结构
{
"表格": {
"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自定义”页面里。
在记录添加页面，您可以通过点击“添加”、“更新”、“删除”按钮来添加、更新、删除表格的行，以此确认各种情况的代码的执行结果。
点击“添加”按钮时，将“添加_单行文本框”以及“添加_复选框”内的值添加到表格
点击“更新”按钮时，将根据“更新_行编号”里指定的行编号，把“更新_单行文本框”和“更新_复选框”的值更新到表格内相应行的相应字段。
点击“删除”按钮时，将根据“删除_行编号”里指定的编号删除相应的行。
(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自定义分“在空白栏内配置按钮”和“添加/更新/删除表格行”两部分。
本次以表格为中心进行讲解，关于空白栏部分的处理请参考以下文章。
以下是各部分的解说。
配置按钮部分
这部分包含了配置按钮和点击按钮时的设置。
比如，点击“添加”按钮后执行“添加行”的函数。
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", } } });图解如下
上传到应用中的整个行添加部分的解说
上面讲到通过.push()来添加行的数据。
然后再调用resetRowNo()这个函数来重置行编号，这个处理不仅在添加行时会调用，在更新及删除行的时也需要调用。 （后面会详述）
更新行处理
更新行时，处理分“找到需要更新的行”和“更新值”这两个部分。
“找到需要更新的行”的方法有好几种，这次用循环的方法来一个个查找，再替换值。
删除行处理
很添加行一样，要对JavaScript数组进行操作，从数组中删除相应的行。
要删除数组的部分内容，使用的是.splice()。
以下是删除表格行的代码（例）
需要向.splice()传递两个参数。
○ 第一个参数：数组内第几个值
○ 第二个参数：要删除几个
删除第二行的数据的代码如下：record.receipts.splice(1, 1);
图解如下
上传到应用中的整个行添加部分的解说
和更新时一样，通过.forEach()循环查找相应的行，并通过.splice()删除此行。
重置行编号处理
本次的范例中，添加/更新/删除行的函数中最后都执行了重置行编号的处理。
和更新/删除行一样，使用.forEach()对每一行进行循环处理，重置编号。
※重置处理在各添加/更新/删除行的函数中被调用，将record数据作为参数传入。
补充
在保存时执行处理时
本次是在编辑页面点击按钮时执行处理，因此使用了kintone.app.record.get() / kintone.app.record.set()。
如果您想在保存记录时执行处理，可以使用保存记录时的事件句柄，然后使用传递给参数event的record进行编辑。
关于使用.forEach()等进行循环处理
比起常见的for语句，.forEach()以及.map(), .reduce()等的循环处理更加方便，请参考以下链接。
forEach(),map(),filter()和reduce()，find（）区别理解
批量删除行时
表格由数组组成，如果要清空表格，可以进行批量处理。
record.表格.value = [];
此Tips在2019年4月版 的kintone中确认过。
