這篇文章給大家帶來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    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！