第 5篇 使用记录的值(列表页面篇)

cybozu发表于:2016年09月23日 17:29:43更新于:2019年02月11日 14:38:03

概要

这次是获取记录的列表页面篇。那就开始吧!

接下来,我们将在PC端的列表页面上改变特定记录的显示颜色。

先从应用准备开始。创建应用,里面包含一个单选框,用于选择信号灯的颜色。和详情页面一样,等下会使用到“字段代码”的设定值。

00157eb819b789e202296893c4e7ebc

取得event对象

创建表格时需要用到的数据,我们一般用event对象来获取。这个在上次的详细页面篇也使用过,应该很容易理解吧。对的,就是这个。

00157eb82f431352dfb5979d978bb0c

关于取得的event对象,我们可以看看记录列表页面显示后的事件的event对象的属性(PC端)。

0015805ee5eacdedcdbfe6b1c1fe139

通过这个表格可以明白,“viewType”是“list”的时候,在records属性里放的是记录对象的数组。记录对象・・・・对哒,和上次详细页面时用的是一样的。也就是说,当使用第x条记录的信号灯颜色时,只要像下面这样写就可以了。

event.records[x].record.信号颜色.value;

以下是取得的记录内容显示在记录列表菜单的下侧空白部分上(以前介绍过),使用viewType=list的范例。

(function() {
    'use strict';
    kintone.events.on('app.record.index.show', function(event) {
        // 0件Hit对策
        if (!event.size) {
            return;
        }
        var myListTable = document.createElement('table');
        myListTable.id = 'my_list_table';
        myListTable.style.border = '1px solid';
        myListTable.style.width = '600px';
        var records = event.records;
        // 取得记录循环
        for (var i = 0; i < records.length; i++) {
            var record = records[i];
            // 记录编号
            var myRecordTd1 = document.createElement('td');
            myRecordTd1.id = 'my_record_td_' + i + '_1';
            myRecordTd1.style.border = '1px solid';
            myRecordTd1.innerText = record.记录编号.value;
            // 信号颜色
            var myRecordTd2 = document.createElement('td');
            myRecordTd2.id = 'my_record_td_' + i + '_2';
            myRecordTd2.style.border = '1px solid';
            myRecordTd2.innerText = record.信号颜色.value;
            // 创建时间
            var myRecordTd3 = document.createElement('td');
            myRecordTd3.id = 'my_record_td_' + i + '_3';
            myRecordTd3.style.border = '1px solid';
            myRecordTd3.innerText = record.创建时间.value;
            var myRecordTr = document.createElement('tr');
            myRecordTr.id = 'my_record_tr_' + i;
            myRecordTr.appendChild(myRecordTd1);
            myRecordTr.appendChild(myRecordTd2);
            myRecordTr.appendChild(myRecordTd3);
            myListTable.appendChild(myRecordTr);
        }
        var myHeaderSpace = kintone.app.getHeaderSpaceElement();
        myHeaderSpace.innerText = '';
        myHeaderSpace.appendChild(myListTable);
    });
})();

取得的结果,根据字段格式的不同,写法可能不一样。这个和上次的详细页面篇是一样的,因为比较容易忘记,我们再来复习一遍吧。下面例子的创建时间,根据时间的格式和时区的不同,显示也不同。(详细请看日期与时间的格式。)

00157eb84d1cc6fa2667e1484f4ecc9

上面的范例可以在列表页面运行一下试试,比如试着更改下排列顺序和显示条数,或试一下搜索功能和翻页,边操作边和原来的表格和内容对比一下。取得的数据、条数、排列顺序,随便哪个都和在列表页面显示的内容一样吧。像这样,要重复利用列表页面中显示的值时,使用event对象非常的方便。列表对于大家来说,也不是什么难事了吧。

获取字段元素

接下来,来试着获取一下实际页面上显示的HTML的DOM元素。这个也不是难事哦。要想获取显示信号颜色的字段元素,只要像下面写就可以了。

kintone.app.getFieldElements('信号颜色');

但是,需要注意的是下面的这些哦。

0015818417a91ef029075876039f46c

要获取的信号颜色的“字段元素数组”,是下图红框里部分的列表。可以确认下实际的页面。

00157eb869fb383e8708bfbb1a8ff65

列表页面自定义

接下来,将结合之前的两个例子,根据值来自定义列表页面的显示。作为主题,由于在记录列表和记录详情页面中设置条件格式这个范例非常优秀,所以参照那个,试着做了下。这个作为内容本身是非常简单的,大家可以结合自己的应用,试一下。

(function() {
    'use strict';
    kintone.events.on('app.record.index.show', function(event) {
        if (!event.size) {
            return;
        }
        var records = event.records;
        var signalColorParts = kintone.app.getFieldElements('信号颜色');
        for (var i = 0; i < records.length; i++) {
            // 值取得
            var color = records[i].信号颜色.value;
            // DOM元素取得
            var part = signalColorParts[i];
            // 根据值分开显示
            if (color === '红') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#ff0000';
            } else if (color === '绿') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#0000ff';
            } else if (color === '黄') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#ffd700';
            }
        }
    });
})();

00157eb8998b9bd428e5b5d5c116f03

哎呀,不好意思。这颜色稍微有点闪眼睛・・・・
至此,使用列表页面的数据来自定义成功啦!

最后

到现在为止,让我们来复习一下吧。
现在大家应该可以亲手制作类似kintone 三分钟 JS 自定义(日文版)里的东西了!

大家可以看一下范例页面里其他的kintone JavaScript API的范例。现在读着代码,是否比以前更容易理解啦?

啊,最后还有一点。
希望这系列教程能够给有意愿学习kintone自定义的人士提供帮助。各位读者,如果接触kintone的时候,有什么问题,请尽管提问。我们传教士将尽全力提供帮助。

接下来,让我们相会在第六篇吧!

Let’s kintone customize\(^o^)/

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

<< 第 4篇 使用记录的(详细页面篇) 第 6篇 使用表格 >>


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复