共计 5008 个字符，预计需要花费 13 分钟才能阅读完成。
一、Handsontable 是指什么？
官网: http://handsontable.com
Handsontable 是一个 JavaScript 库，能够帮忙您轻松实现相似 Excel 电子表格一样的编辑形式。
在示范页面尝试一下就晓得了，不仅能够像 Excel 那样输出数据，还有可指定单元格的格局、制作图表等丰盛的性能。
二、概要
kintone 作为云服务低代码平台，尽管能够通过浏览器间接查看记录列表以及编辑记录等操作，但还是有不少客户反映心愿能够像 Excel 那样查看、编辑数据。
这次就向大家介绍一下如何应用 Cybozu CDN 中颁布的 Handsontable 来实现相似 Excel 的编辑形式。感兴趣的务必请尝试一下哦。
三、筹备利用
首先筹备好利用。
1、字段设置
利用的字段设置如下。字段名称和字段代码一样。
2、列表的设置
列表应用自定义列表。
通过 HTML 来编写显示电子表格所须要的元素。
<div id=”sheet”></div>
对于自定义列表的详情，请参考以下页面。
入门篇 – 应用自定义列表
3、JavaScript/CSS 的设置
本次应用 Cybozu CDN 中的库。Cybozu CDN 不单单提供 JavaScript，还有 CSS 文件。这些内容存在缓存里，具备访问速度快的长处。
这次应用的是 version 0.20.0※。在利用的 JavaScript/CSS 设置页面，输出以下 URL。
备注：在本篇文章中应用的 Handsontable，从 v7.0.0 开始将不再是 MIT License。
在本篇文章的自定义里，请应用许可证为 MIT License 的 v0.20.0（查看许可证内容）。
如需应用 v7.0.0 或更高版本时，请从 Handsontable 的官方网站 购买付费许可证，并在恪守许可证条件的前提下应用。
无关详细信息，请参阅 Cybozu CDN 许可证对应指南。
4、输出数据
先输出几条数据，以不便前面确认用。
四、JavaScript
而后通过 JavaScript 来编写代码。
1、Handsontable 的应用办法
只有指定以下内容即可显示电子表格。数据的话，在 Handsontable 的 data 选项中指定 kintone 的记录数据就能够实现数据绑定了。
var
container = document.getElementById('sheet');
var hot = new Handsontable(container, {
data: data, // 指定数组或对象的数据
minSpareRows: 1, // 指定下边余白
rowHeaders: true, // 指定列的题目
colHeaders: true, // 指定行的题目
contextMenu: true // 显示右击菜单
});2、在电子表格中显示记录列表
首先单纯地试一下将 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"}
]
});
});
})();3、更新电子表格内显示的记录
到这里显示曾经搞定了，然而还须要能够更新数据。
更新时，会调用 afterChange 选项中指定的办法，应用该办法，就能够进行 kintone 的更新解决了。
另外，在指定 columns 选项时，能够将不想被更改的数据指定为 readOnly。
(function() {
// 保留记录的办法
"use strict";
var saveRecords = function(records, callback, errorCallback) {kintone.api(kintone.api.url('/k/v1/records', true), '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); });
}
});
});
})();afterChange 办法的参数 Change 保留以下数组。下面的列子中，参照 ” 产生了更改的单元格的行数 ” 来指定要更改哪条记录。
// 第 10 行，对方负责人被更新时
[
[
9, // 产生变更的单元格的行数
"对方负责人.value", // 产生变更的单元格的列数
"测试人员", // 变更前的数据
"测试人员" // 变更后的数据
]
]顺便说一下，数据绑定是主动的，在电子表格上更改数据后，会立刻反映到 kintone 的 event.records 变量里。十分便当。
五、最初
怎么样？不单单表面看起来像 Excel，能够像 Excel 那样进行数据显示和编辑吧。
增加记录及下拉菜单等的抉择，请点击：下拉菜单选项值联动