読者です 読者をやめる 読者になる 読者になる

Handsontable Dropdown の validation を無効に

Handsontable Dropdown は、デフォルトでは選択リストに定義した以外の入力は、validation が働いて、
セルの背景色が赤くなる。
Dropdown と呼ばれても、内部では autocomplete ということなのであるが、select の性質から、バリデーションが着いている。

f:id:posturan:20160313191154j:plain



例えば未入力にすると、デフォルトでは、、、

f:id:posturan:20160313191159j:plain



これを赤くしないように、つまり validation 機能を無効にするには、
cell の 定義で指定する validation の指定で、Handsontable のコールバック、true を呼べば良い。

Handsontable の Dropdown の説明ページにあるもので例にすると
以下のように指定する。
→ 3列目を validation 無効にしている。


$(function(){
   function getCarData(){
      return [
         ["Nissan", 2009, "black", "black"],
         ["Nissan", 2006, "blue", "blue"],
         ["Chrysler", 2004, "yellow", "black"],
         ["Volvo", 2012, "white", "gray"]
      ];
   }
   $("#example1").handsontable({
      data: getCarData(),
      startRows: 7,
      startCols: 4,
      colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
      columns: [
                  {},
                  {   type: 'numeric'},
                  {   type: 'dropdown',
                     source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"],
                     validator: function(value, callback){ callback(true); },
                  },
                  {   type: 'dropdown',
                     source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
                  }
               ]
   });
});

これで、空入力、選択リストと異なるものを入れてもエラーには
ならない。
→ autocomplete と同じ?でも、Dropdown を表現する ▼マークはつきます。