YUI2.7.0のEditable Table（編集可能な表）でのバリデーション
簡単な入力フォームのバリデーション（入力検証、入力制限）について書いてきたが、編集可能なテーブルについても同様な処理をしたい。
YUIのDataTableはよく出来ているので、バリデーションからサブミットまでのプロセスの雛形を作っておいても損はなさそう。
たとえば、以下のような表があったとする。この表は、以前にログで取り上げたサンプルを、若干変形したもの。
YUI2.7.0のDataTableでは、編集可能な列の属性として
- validator
- defaultValue
を設定することができる。
validatorとしては、YAHOO.widget.DataTable.validateNumberが（雛形として）１つだけ用意されている。入力検証、入力制限を行う上では、これら２属性の設定が基本になる。
上の画面の一番右端の列（編集可能）に
| validator | YAHOO.widget.DataTable.validateNumber |
| defaultValue | 0 |
を設定し、セルをダブルクリックすると、セルエディタ（CellEdlitor）が表示される。この際に、セルに値が設定されていなければ、defaultValueで設定した値が表示される（下の画面）。セルエディタのボタンのラベルも変更できるので「Save」を「保管」としてみた（「キャンセル」は横に大きくなりすぎて、セルエディタのスタイルが崩れてしまう）。
YAHOO.widget.DataTable.validateNumberをvalidatorとして設定しているので、数字（int,float）以外を入力すると、セルエディタが閉じない（表中に一時保管されない）。
HTMLの全文は以下である。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>DataTable Validate</title> <style type="text/css"> </style> <link rel="stylesheet" type="text/css" href="../scripts/lib/yui/build/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="../scripts/lib/yui/build/paginator/assets/skins/sam/paginator.css" /> <link rel="stylesheet" type="text/css" href="../scripts/lib/yui/build/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="../scripts/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="../scripts/lib/yui/build/animation/animation.js"></script> <script type="text/javascript" src="../scripts/lib/yui/build/element/element.js"></script> <script type="text/javascript" src="../scripts/lib/yui/build/paginator/paginator-min.js"></script> <script type="text/javascript" src="../scripts/lib/yui/build/datasource/datasource-min.js"></script> <script type="text/javascript" src="../scripts/lib/yui/build/datatable/datatable-min.js"></script> <style type="text/css" id="defaultstyle"> #main { margin: 2px; padding: 3px; } </style> <script type="text/javascript" src="data.js"></script> <script type="text/javascript"> EzTable = function() { var myDataSource; var myDataTable; return { /** * 初期処理 */ init: function() { // DataTable用：列定義 var myColumnDefs = [ { key:"areacode", label:"コード", width:50, resizeable:true, sortable:true}, { key:"state", label:"都道府県", width:150, resizeable:true, sortable:true}, { key:"notes", label:"メモ (編集可)", editor:new YAHOO.widget.TextboxCellEditor( { validator:YAHOO.widget.DataTable.validateNumber, defaultValue:0, LABEL_SAVE:"保管", LABEL_CANCEL:"Cancel" } ), resizeable:true, sortable:true} ]; // DataTable用：コンフィグ属性 var myConfigs = { sortedBy:{key:"areacode",dir:"asc"}, paginator: new YAHOO.widget.Paginator({ rowsPerPage: 10, template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE, rowsPerPageOptions: [10,25,50,100], pageLinks: 5 }), caption:"都道府県" }; // DataSourceのインスタンス化 myDataSource = new YAHOO.util.DataSource(Data.areacodes); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["areacode","state"] }; // DataTableのインスタンス化 myDataTable = new YAHOO.widget.DataTable("table1", myColumnDefs, myDataSource, myConfigs); // クリックでハイライトするようにハンドラを設定 myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow); /* * セルの処理 */ // ダブルクリックでセルのエディターを呼ぶ。 myDataTable.subscribe("cellDblclickEvent", myDataTable.onEventShowCellEditor); }, // initの終わり oDS: myDataSource, oDT: myDataTable }; }(); </script> </head> <body class=" yui-skin-sam" onload="EzTable.init()"> test_datatable_validate1 <br> <div id="main"> <p>いくつかのオプションを加えたサンプルです。<br/> 編集可能な部分はダブルクリックで変更できます。</p> <div id="table1"></div> </div> </body> </html>
以下が上のサンプルのデータ。都道府県名、県庁所在地（郵便番号）、県庁所在地（住所）をJavascriptの形式で並べてある。後者２つのデータは、Wikipedia_Jaにある情報をもとに作成した（'state'じゃなくて、'pref'の方がいいなぁ）。
Data = { areacodes: [ {areacode: "01", state: "北海道", zip:"060-8588", capitol:"札幌市中央区北3条西6丁目1番地"}, {areacode: "02", state: "青森", zip:"030-8570", capitol:"青森市長島1丁目1番1号"}, {areacode: "03", state: "秋田", zip:"010-8570", capitol:"秋田市山王四丁目1番1号"}, {areacode: "04", state: "岩手", zip:"020-8570", capitol:"盛岡市内丸10番1号"}, {areacode: "05", state: "宮城", zip:"980-8570", capitol:"仙台市青葉区本町3丁目8番1号"}, {areacode: "06", state: "山形", zip:"990-8570", capitol:"山形市松波2丁目8番1号"}, {areacode: "07", state: "福島", zip:"960-8670", capitol:"福島市杉妻町2番16号"}, {areacode: "08", state: "新潟", zip:"950-8570", capitol:"新潟市中央区新光町4番地1"}, {areacode: "09", state: "茨城", zip:"310-8555", capitol:"水戸市笠原町978番地6"}, {areacode: "10", state: "栃木", zip:"320-8501", capitol:"宇都宮市塙田1丁目1番20号"}, {areacode: "11", state: "群馬", zip:"371-8570", capitol:"前橋市大手町1丁目1番1号"}, {areacode: "12", state: "山梨", zip:"400-8501", capitol:"甲府市丸の内一丁目6番1号"}, {areacode: "13", state: "埼玉", zip:"330-9301", capitol:"さいたま市浦和区高砂3丁目15番1号"}, {areacode: "14", state: "東京", zip:"163-8001", capitol:"新宿区西新宿二丁目8番1号"}, {areacode: "15", state: "神奈川", zip:"231-8588", capitol:"横浜市中区日本大通1番"}, {areacode: "16", state: "千葉", zip:"260-8667", capitol:"千葉市中央区市場町1番1号"}, {areacode: "17", state: "長野", zip:"380-8570", capitol:"長野市大字南長野字幅下692番2号"}, {areacode: "18", state: "岐阜", zip:"500-8570", capitol:"岐阜市藪田南二丁目1番1号"}, {areacode: "19", state: "富山", zip:"930-8501", capitol:"富山市新総曲輪1番7号"}, {areacode: "20", state: "石川", zip:"920-8580", capitol:"金沢市鞍月一丁目1番地"}, {areacode: "21", state: "福井", zip:"910−8580", capitol:"福井市大手3丁目17番1号"}, {areacode: "22", state: "静岡", zip:"420-8601", capitol:"静岡市葵区追手町9番6号"}, {areacode: "23", state: "愛知", zip:"460-8501", capitol:"名古屋市中区三の丸3丁目1番2号"}, {areacode: "24", state: "三重", zip:"514-8570", capitol:"津市広明町13番"}, {areacode: "25", state: "和歌山", zip:"640-8585", capitol:"和歌山市小松原通一丁目1番地"}, {areacode: "26", state: "奈良", zip:"630-8501", capitol:"奈良市登大路町30"}, {areacode: "27", state: "京都", zip:"602-8570", capitol:"京都市上京区下立売通新町西入藪の内町85番地3"}, {areacode: "28", state: "大阪", zip:"540-8570", capitol:"大阪市中央区大手前二丁目1番22号"}, {areacode: "29", state: "兵庫", zip:"650-8567", capitol:"神戸市中央区下山手通5丁目10番1号"}, {areacode: "30", state: "滋賀", zip:"520-8577", capitol:"大津市京町4丁目1番1号"}, {areacode: "31", state: "徳島", zip:"770-8570", capitol:"徳島市万代町一丁目一番地"}, {areacode: "32", state: "香川", zip:"760-8570", capitol:"高松市番町四丁目1番10号"}, {areacode: "33", state: "愛媛", zip:"790-8570", capitol:"松山市一番町四丁目四番地二"}, {areacode: "34", state: "高知", zip:"780-8570", capitol:"高知市丸ノ内1丁目2番20号"}, {areacode: "35", state: "岡山", zip:"700-8570", capitol:"岡山市北区内山下二丁目4番6号"}, {areacode: "36", state: "広島", zip:"730-8511", capitol:"広島市中区基町10番52号"}, {areacode: "37", state: "島根", zip:"690-8501", capitol:"松江市殿町1番"}, {areacode: "38", state: "鳥取", zip:"680-8570", capitol:"鳥取市東町一丁目220番地"}, {areacode: "39", state: "山口", zip:"753-8501", capitol:"山口市滝町1番1号"}, {areacode: "40", state: "福岡", zip:"812-8577", capitol:"福岡市博多区東公園7番7号"}, {areacode: "41", state: "佐賀", zip:"840-8570", capitol:"佐賀市城内1丁目1-59"}, {areacode: "42", state: "長崎", zip:"850-8570", capitol:"長崎市江戸町2番13号"}, {areacode: "43", state: "大分", zip:"870-8501", capitol:"大分県大分市大手町3丁目1番1号"}, {areacode: "44", state: "宮崎", zip:"880-8501", capitol:"宮崎市橘通2丁目10番1号"}, {areacode: "45", state: "熊本", zip:"862-8570", capitol:"熊本市水前寺6丁目18番1号"}, {areacode: "46", state: "鹿児島", zip:"890-8577", capitol:"鹿児島市鴨池新町10番1号"}, {areacode: "47", state: "沖縄", zip:"900-8570", capitol:"那覇市泉崎1丁目2番地2号"}, ] };
