通过Handsontable在kintone上实现像Excel一样编辑数据 之系列1

aki发表于:2017年01月23日 16:45:57更新于:2019年01月30日 17:18:31

概要

kintone虽然可以通过浏览器直接查看记录列表以及编辑记录等操作,但还是有不少客户反映希望可以像Excel那样查看、编辑数据。
这次就向大家介绍一下如何使用Cybozu CDN中公布的Handsontable来实现类似Excel的编辑方式。感兴趣的务必请尝试一下哦。

Handsontable是指什么?

官网: http://handsontable.com

Handsontable是一个JavaScript库,可以帮助您轻松实现类似Excel电子表格一样的编辑方式。
示范页面尝试一下就知道了,不仅可以像Excel那样输入数据,还有可指定单元格的格式、制作图表等丰富的功能。

准备应用

首先准备好应用。

字段设置

应用的字段设置如下。字段名称和字段代码一样。

字段名称(字段代码)字段类型
记录编号记录编号
公司名称单行文本框
对方负责人单行文本框
签约日日期
硬度单选框
产品名称下拉菜单
单价数值
合计计算

列表的设置

列表使用自定义列表。
通过HTML来编写显示电子表格所需要的元素。

<div id="sheet"></div>

关于自定义列表的详情,请参考以下页面。

JavaScript/CSS的设置

本次使用Cybozu CDN中的库。Cybozu CDN不单单提供JavaScript,还有CSS文件。这些内容存在缓存里,具有访问速度快的优点。

这次使用的是version 0.20.0。在应用的JavaScript/CSS设置页面,输入以下URL。

输入数据

先输入几条数据,以方便后面确认用。

JavaScript

然后通过JavaScript来编写代码。

Handsontable的使用方法

只要指定以下内容即可显示电子表格。数据的话,在Handsontable的data选项中指定kintone的记录数据就可以实现数据绑定了。

var
  container = document.getElementById('sheet');    
  var hot  = new Handsontable(container, {    
    data: data,        // 指定数组或对象的数据    
  minSpareRows: 1,   // 指定下边余白    
  rowHeaders: true,  // 指定列的标题    
  colHeaders: true,  // 指定行的标题    
  contextMenu: true  // 显示右击菜单    
});

在电子表格中显示记录列表

首先单纯地试一下将kintone记录显示到电子表格。
Handsontable的data选项指定为kintone的记录数据,columns指定为"字段名称.value",这样就可以使kintone的记录数据显示到电子表格了。
根据需要,可通过数组形式给colHeaders选项指定标题行。
※viewId是设置自定义列表时输入的viewId。

(function() {
    "use strict";
    kintone.events.on(['app.record.index.show'], function(event) {
        // 指定列表ID(指定的列表ID的列表不处理)
        if (event.viewId !== 7199) return;
        var records = event.records;
        // 创建自定义列表时填写的HTML元素。
        var container = document.getElementById('sheet');
        // Handsontable实例化
        var hot = new Handsontable(container, {
            // 指定kintone的记录数据
            data: records,
            minSpareRows: 0,
            // 指定列的标题
            colHeaders: ["记录编号", "公司名称", "对方负责人", "签约日", "硬度", "产品名称", "单价", "用户数", "合计"],
            contextMenu: false,
            // 指定显示data对象的哪列。
            columns: [
                {data: "记录编号.value"},
                {data: "公司名称.value"},
                {data: "对方负责人.value"},
                {data: "签约日.value"},
                {data: "硬度.value"},
                {data: "产品名称.value"},
                {data: "单价.value"},
                {data: "用户数.value"},
                {data: "合计.value"}
            ]
        });
    });
})();

这样,kintone中的数据应该就能像Excel那样显示了。

0015888099a6eb8c8e18cb62ac9c83e

更新电子表格内显示的记录

到这里显示已经搞定了,但是还需要可以更新数据。
更新时,会调用afterChange选项中指定的方法,使用该方法,就可以进行kintone的更新处理了。
另外,在指定columns选项时,可以将不想被更改的数据指定为readOnly。

(function() {
    // 保存记录的方法
    "use strict";
    var saveRecords = function(records, callback, errorCallback) {
        kintone.api('/k/v1/records', 'PUT', {app: kintone.app.getId(), records: records},
        function(resp) {
            callback(resp);
        },
        function(resp) {
            errorCallback(resp);
        });
    };
    // 更新kintone记录时使用的方法:要先排除不能更新的字段,比如记录编号等。
    var setParams = function(record) {
        var result = {};
        for (var prop in record) {
            if (['记录编号', '创建时间', '更新时间', '创建人', '更新人'].indexOf(prop) === -1) {
                result[prop] = record[prop];
            }
        }
        return result;
    };
    // 显示列表使用的事件语句
    kintone.events.on(['app.record.index.show'], function(event) {
        if (event.viewId !== 7199) return;
        var records = event.records;
        var container = document.getElementById('sheet');
        var hot = new Handsontable(container, {
            data: records,
            minSpareRows: 0,
            colHeaders: ["记录编号", "公司名称", "对方负责人", "签约日", "硬度", "产品名称", "单价", "用户数", "合计"],
            contextMenu: false,
            // 根据需要可指定readOnly。
            columns: [
                {data: "记录编号.value", readOnly: true},
                {data: "公司名称.value"},
                {data: "对方负责人.value"},
                {data: "签约日.value"},
                {data: "硬度.value"},
                {data: "产品名称.value"},
                {data: "单价.value"},
                {data: "用户数.value"},
                {data: "合计.value", readOnly: true}
            ],
            // 电子表格的单元格被更新时,以下方法会被调用。
            // 调用的aftarChange方法可知道参数change中变更的单元格的详情,参数source可知道从什么变更而来的。
            afterChange: function(change, source) {
                if (source === 'loadData') {
                    return;
                }
                var i;
                var targets = [];
                // 读取参数change的数据,发行kintone的更新API。
                for (i = 0; i < change.length; i++) {
                    targets.push({
                        id: records[change[i][0]]["记录编号"].value,
                        record: setParams(records[change[i][0]])
                    });
                }
                saveRecords(targets, function(resp) {console.dir(resp); }, function(resp) {console.dir(resp); });
            }
        });
    });
})();

00158880aac67ae14b88777775cf293

afterChange方法的参数Change保存以下数组。上面的列子中,参照"发生了更改的单元格的行数"来指定要更改哪条记录。

// 第10行,对方负责人被更新时    
[    
  [    
    9,                   // 发生变更的单元格的行数    
    "对方负责人.value",   // 发生变更的单元格的列数    
    "测试人员",          // 变更前的数据    
    "测试人员"           // 变更后的数据    
  ]    
]

顺便说一下,数据绑定是自动的,在电子表格上更改数据后,会立即反映到kintone的event.records变量里。非常便利。

最后

怎么样?不单单外表看起来像Excel,可以像Excel那样进行数据显示和编辑吧。添加记录及下拉菜单等的选择在下一篇中揭晓,敬请期待!

通过Handsontable在kintone上实现像Excel一样编辑数据  之系列2>>

    您需要登录后才可以回复