第 6篇使用表格

aki • 发表于：2016年10月03日 16:30:18 • 更新于：2019年02月11日 14:38:49

概要

今天向大家介绍JavaScript API的数据获取中大家提问最多的表格(^^)

～～～～～～～～～～～～～～

在某片森林深处，有一位J爷爷经营着一家面包店，J爷爷的面包里含有许多爱和勇气，深受小朋友的喜爱。但是，J爷爷还要忙着维护村庄的安全，没有时间管理面包的销售情况。于是，正在为此事头疼的J爷爷去找非常靠谱的商务好伙伴兼好朋友的kintone超人商量了。商量后，他决定使用kintone的表格和JavaScript API来管理每日销售合计！

(此故事纯属虚构，和实际生活中的人、团体、事件等无任何关系。)

～～～～～～～～～～～～～～

大家也和kintone超人一起来帮帮J爷爷吧！Ｏ( ･`ω´・)乂(・∀・｀ )Ｏ

准备应用

我们来看看J爷爷做的应用吧。关于表格的创建方法请参考在表单中添加表格。

00157f223c61b60f29dc3342ff5085e

各字段和字段代码如下所示。再罗嗦一下，字段代码因为后面要用到，所以要记下来哦φ(￣ー￣ )记下记下

字段名称	字段类型	字段代码
日期	日期	日期
-	表格	order_items
-	空白栏	sub_total_area
创建时间	创建时间	创建时间
更新时间	更新时间	更新时间

另外，表格(order_items)内的字段如下。

字段名称	字段类型	字段代码
类别	单选框	商品类别
商品名称	单行文本框	商品名称
单价(元)	数值	单价
个数	数值	个数

获取记录

以下是10月3号面包店的销售数据。我们就用这个数据来试试(^^♪

00157f223e7ca82ac7c341874770449

关于表格内记录对象的获取，其实并不是什么难事。和其他的字段类型一样，在event对象的record元素后指定表格的字段代码。也就是像下面这样滴。

var tableRecords = event.record.order_items.value;

关于使用此方法可以获取哪些数据，请参考字段格式。表格的应答数据在自定义字段的表格中有详细记载。

00157f2241c5c7a8ba4b758fa83d354

试着获取表格的第二条记录的商品名称吧(^^♪
这里有一点希望大家注意一下，数组的元素是从0开始的，因此表格中第2条数据在数组中下标为1。

(function() {
    "use strict";
    kintone.events.on('app.record.detail.show', function(event) {
        if (!event.record) {
            return;
        }
       // 获取字段代码"order_items"的记录对象
        var tableRecords = event.record.order_items.value;
        // 获取第２个"商品名称"字段的值
        var secondItemName = tableRecords[1].value['商品名称'].value;
        alert(secondItemName);
    });
})();

成功获取到两条商品名称【切片面包】了吧！＼(*^▽^*)ノ

00157f224372232ec13f7c322a71d11

从上面的截图可以看出，alert在显示表格的记录之前弹出来。也就是说， 'app.record.detail.show'事件在显示表格数据之前就被执行了。关于这一点，在今后使用获取到的表格数据进行更高的自定义时需要注意。

按照类别计算合计

J爷爷又说因为想知道得买多少材料，所以希望能够按各分类分别统计销售额，并显示在空白栏字段里。入门系列已经学习到这里的各位，我想已经不需要我作详细说明了，代码范例如下。

(function() {
    "use strict";
    kintone.events.on('app.record.detail.show', function(event) {
        if (!event.record) {
            return;
        }
        var subTotals = new Array();
        var tableRecords = event.record.order_items.value;
        // 按类别统计表格内的各记录
        for (var i = 0; i < tableRecords.length; i++) {
            var category = tableRecords[i].value['商品类别'].value;
            if (!subTotals[category]) {
                subTotals[category] = 0;
            }
            var number = tableRecords[i].value['个数'].value;
            var price = tableRecords[i].value['单价'].value;
            subTotals[category] += price * number;
        }
      // 将统计结果显示在空白栏字段中
        var myTotalSpace = document.createElement('ul');
        for (var category in subTotals) {
           var categorySpace = document.createElement('li');
            categorySpace.innerText = category + ': ' + subTotals[category] + '元';
            myTotalSpace.appendChild(categorySpace);
        }
        kintone.app.record.getSpaceElement('sub_total_area').appendChild(myTotalSpace);
    });
})();

00157f2245241debcb54c74409c84dc

这个也轻轻松松搞定！！

J爷爷的烦恼终于解决了。Σd=(・ω-｀o)ｸﾞｯ♪

最后

关于表格数据的合计，还可以使用自动计算功能的办法，这里就不作详细说明了。这个方法也希望大家能够掌握，是个非常便利的功能。不过像这次一样，如果想自由加减条件进行各种计算，建议使用JavaScript，可以进行各种各样的自定义。为了能够根据需求选择合适的方法，大家加油好好学习kintone吧！

Let’s kintone customize＼(^o^)／

该Tips在2014年6月版中进行过确认。

<< 第5篇使用记录的值（列表页面篇） | 第 7篇使用自定义列表>>

上一篇第 5篇使用记录的值（列表页面篇）

下一篇第 7篇使用自定义列表

cybozu • 发表于 2019年05月10日 14:51
你好，比如在批量获取记录的时候，如果没有记录的话，这个records会返回一个空的数组：
```
{
    "records": [],
    "totalCount": null
}
```
当然获取单个记录的时候也可能会有这种情况，这时候就需要判断
```
if(!event.record){return;}
```
不然下面的操作就会报错。所以为了防止出现这样的错误，在操作前做个判断会避免一些错误。

引用追梦人的回复：
您好，我有一个疑问，在详情页面，调用test函数，为什么开头要写 if(!event.record){return;}这样的判断条件，我试了一下，这个判断条件写与不写，效果是一样的，请问是否可以去掉呢？我看到好多案例中都有这样的判断，不是太理解，为什么这样写。能否解释一下，谢谢。下面的这个是我写的代码：(function(){ "use strict";function test(event){ if(!event.record){ return;} //后面的逻辑 date = moment(record["日期与时间"].value).format("YYYY 年 MM 月 DD 日 HH:mm"); //获取时间字段内容 //获取空白栏 var space_field = kintone.app.record.getSpaceElement("space_field"); space_field.style.width = "400px"; space_field.innerHTML = date;} kintone.events.on("app.record.detail.show",test);}){};
betsy_yan • 发表于 2019年05月10日 14:30

这条是判断是否有数据，有数据的话就执行下去。
你试试没有数据时去掉这段判断是不是会出错。
引用追梦人的回复：
您好，我有一个疑问，在详情页面，调用test函数，为什么开头要写 if(!event.record){return;}这样的判断条件，我试了一下，这个判断条件写与不写，效果是一样的，请问是否可以去掉呢？我看到好多案例中都有这样的判断，不是太理解，为什么这样写。能否解释一下，谢谢。下面的这个是我写的代码：(function(){ "use strict";function test(event){ if(!event.record){ return;} //后面的逻辑 date = moment(record["日期与时间"].value).format("YYYY 年 MM 月 DD 日 HH:mm"); //获取时间字段内容 //获取空白栏 var space_field = kintone.app.record.getSpaceElement("space_field"); space_field.style.width = "400px"; space_field.innerHTML = date;} kintone.events.on("app.record.detail.show",test);}){};
追梦人 • 发表于 2019年05月10日 13:53

您好，我有一个疑问，
在详情页面，调用test函数，为什么开头要写 if(!event.record){return;}这样的判断条件，我试了一下，这个判断条件写与不写，效果是一样的，请问是否可以去掉呢？
我看到好多案例中都有这样的判断，不是太理解，为什么这样写。能否解释一下，谢谢。

下面的这个是我写的代码：
(function(){
"use strict";
function test(event){
if(!event.record){
return;
}
//后面的逻辑
date = moment(record["日期与时间"].value).format("YYYY 年 MM 月 DD 日 HH:mm");
//获取时间字段内容
//获取空白栏
var space_field = kintone.app.record.getSpaceElement("space_field");
space_field.style.width = "400px";
space_field.innerHTML = date;
}

kintone.events.on("app.record.detail.show",test);
}){};

betsy_yan • 发表于 2019年04月09日 18:12

你好，用你这段代码测试了一下是好的，可以弹出窗口。

请确认一下你的字段代码是否正确和是否存在第二件商品。

引用 closer 的回复：

(function () {
    "use strict";
    kintone.events.on('app.record.detail.show', function (event) {
        if (!event.record) {
            return;
        }       // 获取字段代码"order_items"的记录对象       
        var tableRecords = event.record.order_items.value;
        // 获取第２个"商品名称"字段的值        
        var secondItemName = tableRecords[1].value['商品名称'].value;
        alert(secondItemName);
    });
})();

直接按照这种写法，调试怎么都不报错，也没有起到效果

closer • 发表于 2019年04月09日 17:26

(function () {
    "use strict";
    kintone.events.on('app.record.detail.show', function (event) {
        if (!event.record) {
            return;
        }       // 获取字段代码"order_items"的记录对象       
        var tableRecords = event.record.order_items.value;
        // 获取第２个"商品名称"字段的值        
        var secondItemName = tableRecords[1].value['商品名称'].value;
        alert(secondItemName);
    });
})();

直接按照这种写法，调试怎么都不报错，也没有起到效果

closer • 发表于 2019年04月09日 09:19

你好，函数里需要有参数呢。
引用 closer 的回复：
我现在就是把计算公式放在不是表格的字段，可以将表格的一列的合计值计算出来。但是想要实现像Excel表格下有一行合计那种效果。
closer • 发表于 2019年04月09日 09:16

我现在就是把计算公式放在不是表格的字段，可以将表格的一列的合计值计算出来。但是想要实现像Excel表格下有一行合计那种效果。

引用 betsy_yan 的回复：
你好，“字段循环参照”的意思应该是你把“计算”的字段代码加到了计算公式当中。在计算公式中去掉“计算”的字段代码就好了。希望对你有帮助！
betsy_yan • 发表于 2019年04月08日 15:11

你好，
“字段循环参照”的意思应该是你把“计算”的字段代码加到了计算公式当中。在计算公式中去掉“计算”的字段代码就好了。
希望对你有帮助！
引用 closer 的回复：
“表格数据的合计，还可以使用自动计算功能的办法”，这种方式是不是需要先将表格数据做好，我在设置公式的时候报错：'字段循环参照'
closer • 发表于 2019年04月08日 14:24

“表格数据的合计，还可以使用自动计算功能的办法”，这种方式是不是需要先将表格数据做好，我在设置公式的时候报错：'字段循环参照'
cybozu • 发表于 2017年03月20日 14:43
betsy_yan，您好！
原来的代码有点问题。"[]"不需要。现在已经改好了，请再看一下。
```
var subTotals = new Array([]);
↓
var subTotals = new Array();
```
betsy_yan • 发表于 2017年03月17日 17:17
想问一下：
按照 “tutorial-211058-02.js” 制作出的应用，莫名总会出现：
- 0: 元
比如：
- 0: 元
- 饮料: 15元
- 蛋糕: 460元
- 面包: 152元
- 其他糕点: 224元
又比如：
- 0: 元
- 蛋糕: 125元
等

不管几条数据，总会出现“0: 元”。
发现
```
for (category in subTotals)
```
后，
console.log(category);
出来的内容第一个总是： 0，后面才是具体商品类别的值。
想来很久都不知道这个“0”是怎么出来的。

能否解释一下具体原因呢？

PS.
我修改了一下“for”这里的程序 0 就不出现了。程序如下：
        for (category in subtotals) {
            if (category !== '0') {
                var categoryspace = document.createElement('li');
                categoryspace.innerHTML = category + '：' + subtotals[category] + '元';
                mytotalspace.appendChild(categoryspace);
            }
        }