彩票走势图

项目管理软件dhtmlxGantt配置教程(九):输入值验证方法

翻译|使用教程|编辑:秦林|2022-10-18 14:50:01.860|阅读 126 次

概述:这篇文章给大家带来dhtmlxGantt的输入值验证。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxgantt入门教程

这篇文章给大家带来dhtmlxGantt的输入值验证。

DhtmlxGantt正版试用下载

在 Grid 中编辑单元格时可能会出错。

为避免保存不正确的值,您需要在关闭编辑器之前验证输入值。它可以通过以下两种方式之一实现:

  • 通过自定义编辑器对象的is_valid方法
  • 通过inlineEditors 对象的onBeforeSave事件

让我们考虑启用验证时编辑器的行为。

例如,您通过鼠标指针在 Grid 单元格中打开了编辑器。以下方法将适用于您的进一步行动:

  • 编辑单元格后按 Escape 将关闭编辑器而不保存任何更改。
  • 如果该值有效,按 Enter 将确认并关闭编辑器,否则将丢弃输入的值。
  • 在编辑单元格时按 Tab 或使用鼠标指针将保存有效值并将焦点移动到另一个单元格,而无效值将被重置并关闭编辑器。

防止编辑器关闭

启用编辑器验证后,甘特图不会保存错误的输入值,而是重置它们并关闭编辑器。因此,您需要打开单元格并再次更改值。

防止编辑器关闭的一个好方法是弹出一个警告框,让用户有机会修复不正确的值。为此,您需要使用自定义键盘映射,如下所示:

function editAnotherCell(inlineEditors){
  var value = inlineEditors.getValue();
  if(confirm(`does '${value}' look ok to you?`)){
    inlineEditors.save();
  }
}
 
var mapping = {
  init: function(inlineEditors){
    gantt.attachEvent("onTaskClick", function (id, e) {
      var cell = inlineEditors.locateCell(e.target);
      if (cell && inlineEditors.getEditorConfig(cell.columnName)) {
        if (inlineEditors.isVisible()) edit_another_cell(inlineEditors)
        else inlineEditors.startEdit(cell.id, cell.columnName);
        return false;
      }
      return true;
    });
    gantt.attachEvent("onEmptyClick", function () {
      inlineEditors.hide();
      return true;
    });
  },
 
  onShow: function(inlineEditors, node){
 
    node.onkeydown = function (e) {
      e = e || window.event;
      if(e.defaultPrevented){
        return;
      }
 
      var keyboard = gantt.constants.KEY_CODES;
 
      var shouldPrevent = true;
      switch (e.keyCode) {
        case gantt.keys.edit_save:
          var value = inlineEditors.getValue();
          if(confirm(`does '${value}' look ok to you?`)){
            inlineEditors.save();
          }
 
          break;
        case gantt.keys.edit_cancel:
          inlineEditors.hide();
          break;
        case keyboard.TAB:
          if(e.shiftKey){
            if (inlineEditors.isVisible()) editAnotherCell(inlineEditors)
            else inlineEditors.editPrevCell(true);
          }else{
            if (inlineEditors.isVisible()) editAnotherCell(inlineEditors)
            else inlineEditors.editNextCell(true);
          }
          break;
        default:
          shouldPrevent = false;
          break;
      }
 
      if(shouldPrevent){
        e.preventDefault();
      }
    };
  },
 
  onHide: function(inlineEditors, node){}
};
 
gantt.ext.inlineEditors.setMapping(mapping);
 
gantt.init("gantt_here");

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯,欢迎访问慧都网进行咨询或者私信我获取正版试用版及报价。


甘特图控件交流群:764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询,请点这里!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP