handsontable测试_handsontable pikaday-优快云博客

本文介绍了一个使用 Handsontable 的示例，演示了如何利用自定义下拉框渲染器实现单元格编辑功能。此示例中包含了 jQuery 和 Handsontable 的集成，通过简单的表格数据展示并提供了用于查看当前数据源的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</style>

<link rel="stylesheet" media="screen" href="http://past.handsontable.com/dist/handsontable.css">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/dist/pikaday/pikaday.css">
<script src="http://past.handsontable.com/dist/pikaday/pikaday.js"></script>
<script src="http://past.handsontable.com/dist/moment/moment.js"></script>
<script src="http://past.handsontable.com/dist/numbro/numbro.js"></script>
<script src="http://past.handsontable.com/dist/numbro/languages.js"></script>
<script src="http://past.handsontable.com/dist/handsontable.js"></script>
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

<h2>Select editor</h2>

<p>Select editor should be considered an example how to write editors rather than used as a fully featured
editor. It is a much simpler form of the <a href="dropdown.html">Dropdown editor</a>. It is suggested to
use the latter
in your projects.</p>

<div id="example1" class="handsontable htColumnHeaders"></div>

<p>
<button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump data to console
</button>
</p>

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {

if (instance.getCell(row, col)) {
$(instance.getCell(row,col)).addClass('select2dropdown');
}
var selectedId;
var colOptions = cellProperties.selectOptionsData;
if (colOptions != undefined) {
for (var index = 0; index < colOptions.length; index++) {
if (parseInt(value) === colOptions[index].id) {
selectedId = colOptions[index].id;
value = colOptions[index].text;
}
}
Handsontable.cellTypes.dropdown.renderer.apply(this, arguments);
}
}
$(document).ready(function () {
var container = document.getElementById("example1"),
hot1;
hot1 = new Handsontable(container, {
data: [
['2008', '1', 11],
['2009', '2', 11],
['2010', '1', 15]
],
colHeaders: true,
contextMenu: false,
columns: [
{},
{
editor: 'select',
type: "dropdown",
renderer: customDropdownRenderer,
selectOptionsData: [{id:1,text:'Kia'},{id:2,text:'222Kia'}],
selectOptions: ['Kia','222Kia']
},
{}
]
});

function bindDumpButton() {

Handsontable.dom.addEvent(document.body, 'click', function (e) {

var element = e.target || e.srcElement;

if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton();

});