关于kintone表格的基本操作(添加/更新/删除行)

aki发表于:2020年04月07日 12:54:53更新于:2022年07月29日 18:20:20

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

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",
            }
          }
        });
  • 图解如下
    0015e9000fa8d78d0e799396a596850

  • 上传到应用中的整个行添加部分的解说
    上面讲到通过.push()来添加行的数据。
    然后再调用resetRowNo()这个函数来重置行编号,这个处理不仅在添加行时会调用,在更新及删除行的时也需要调用。 (后面会详述)
    0015e957f3d3224a4918f6178b6a1b9

更新行处理 

更新行时,处理分“找到需要更新的行”和“更新值”这两个部分。
“找到需要更新的行”的方法有好几种,这次用循环的方法来一个个查找,再替换值。

0015e900fd35fb9339c3211e79f5a08

删除行处理 

很添加行一样,要对JavaScript数组进行操作,从数组中删除相应的行。
要删除数组的部分内容,使用的是.splice()。

  • 以下是删除表格行的代码(例)
    需要向.splice()传递两个参数。
    ○ 第一个参数:数组内第几个值
     第二个参数:要删除几个
    删除第二行的数据的代码如下:

    record.receipts.splice(1, 1);
  • 图解如下
    0015e9013a78cbe08dd223b78af6aab

  • 上传到应用中的整个行添加部分的解说
    和更新时一样,通过.forEach()循环查找相应的行,并通过.splice()删除此行。
    0015e9015490563d4a41505568dbc2c

重置行编号处理 

本次的范例中,添加/更新/删除行的函数中最后都执行了重置行编号的处理。
和更新/删除行一样,使用.forEach()对每一行进行循环处理,重置编号。
※重置处理在各添加/更新/删除行的函数中被调用,将record数据作为参数传入。
0015e90178393548da7ad5147f0f263

补充

在保存时执行处理时

本次是在编辑页面点击按钮时执行处理,因此使用了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中确认过。

附件:表格操作技巧.zip • 3.52KB • 下载

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。