一、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那样进行数据显示和编辑吧。
增加记录及下拉菜单等的抉择，请点击：下拉菜单选项值联动