具有每周日期格式的 Handsontable 标题

Posted 2023-03-22

【中文标题】具有每周日期格式的 Handsontable 标题

【英文标题】：Handsontable header with weekly date format

【发布时间】：2017-03-30 16:42:27

【问题描述】：

我想实现handsontable like header 包含每周日期格式，更多请查看下面的图片

标题从当前日期开始到接下来的 7 天，一个按钮用于滚动下一个和上一个日期。我尝试使用 help 的以下代码

 
    type: 'date',
    dateFormat: 'MM/DD/YYYY',
    correctFormat: true,
    defaultDate: '01/01/1900'
  

但它将日期选择器显示为单元格值而不是列标题。有谁知道如何使用handsontable在列标题中显示从星期一开始的当前周。

【参考方案1】：

经过一些搜索并在 java 脚本的帮助下，我提供了我的解决方案以进行更多检查

function loadTable(weekDays) 
var example2 = document.getElementById('example2');
var hot2 = new Handsontable(example2, 
data: Handsontable.helper.createSpreadsheetData(3, 7),
colHeaders: weekDays
);

function bindDumpButton() 
  if (typeof Handsontable === "undefined") 
    return;
  

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

更多信息请查看JsFiddle

【参考方案2】：

您不能使用此方法，因为列仅用于正文表。

你可以使用 afterGetColHeader (doc) :

afterGetColHeader(col, TH) 

并在 TH 元素中插入日期选择器。