第 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爷爷吧!O( ・`ω´・)乂(・∀・` )O

准备应用

我们来看看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;
        // 获取第2个"商品名称"字段的值
        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篇 使用自定义列表>>


回复(11)

  • cybozu

    你好 ,比如在批量获取记录的时候,如果没有记录的话,这个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

    这条是判断是否有数据,有数据的话就执行下去。

    你试试没有数据时去掉这段判断是不是会出错。

    引用 追梦人 的回复:

    您好,我有一个疑问, 在详情页面,调用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);}){};

  • 追梦人

    您好,我有一个疑问,

     在详情页面,调用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

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

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

    引用 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;
            // 获取第2个"商品名称"字段的值        
            var secondItemName = tableRecords[1].value['商品名称'].value;
            alert(secondItemName);
        });
    })();

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

  • 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;
            // 获取第2个"商品名称"字段的值        
            var secondItemName = tableRecords[1].value['商品名称'].value;
            alert(secondItemName);
        });
    })();

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

  • closer

    你好,函数里需要有参数呢。

    引用 closer 的回复:

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

  • closer

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


    引用 betsy_yan 的回复:

    你好,“字段循环参照”的意思应该是你把“计算”的字段代码加到了计算公式当中。在计算公式中去掉“计算”的字段代码就好了。希望对你有帮助!

  • betsy_yan

    你好,

    “字段循环参照”的意思应该是你把“计算”的字段代码加到了计算公式当中。在计算公式中去掉“计算”的字段代码就好了。

    希望对你有帮助!

    引用 closer 的回复:

    “表格数据的合计,还可以使用自动计算功能的办法”,这种方式是不是需要先将表格数据做好,我在设置公式的时候报错:'字段循环参照'

  • closer

    “表格数据的合计,还可以使用自动计算功能的办法”,这种方式是不是需要先将表格数据做好,我在设置公式的时候报错:'字段循环参照'

  • cybozu

    betsy_yan,您好!

    原来的代码有点问题。"[]"不需要。现在已经改好了,请再看一下。

    var subTotals = new Array([]);
    ↓
    var subTotals = new Array();


  • betsy_yan

    想问一下:

    按照 “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);
                }
            }