handsontable测试

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

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

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<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;}

</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();

});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值