一、Handsontable是指什么?
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。
-
JavaScript URL
https://js.cybozu.cn/handsontable/0.20.0/handsontable.full.min.js -
CSS URL
https://js.cybozu.cn/handsontable/0.20.0/handsontable.full.min.css
备注:在本篇文章中使用的 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"} ] }); }); })();
这样,kintone中的数据应该就能像Excel那样显示了。
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那样进行数据显示和编辑吧。
添加记录及下拉菜单等的选择,请点击:https://cybozudev.kf5.com/hc/kb/article/219875/
标签:Handsontable,Excel,指定,value,编辑,var,kintone,data From: https://www.cnblogs.com/cybozu/p/17370681.html