2009-05-03

今回は、DataTableの「セルエディタ（Cell Editor）に設定するバリデータ（validator）」を自作してみる。

YAHOO.widget.DataTable.validateNumberのソースを見ると、以下のように書けばいいことがわかる。

引数として入力値をとる関数
引数を検証し、OKならoData、NGならundefinedを返す

前回のログで作ったサンプルに、「null値（未入力）チェック」を仕掛けてみる。列のdefaultValueには「入力してください.」と入力のガイドをいれてみた（下の図）。

上の画面（の入力フィールド）をそのままSavaすると、「入力してください」というガイドが、表に一時保管されてしまうので注意。これを消してSaveすると、セルエディタには「入力してください」という初期値が設定され（エラーメッセージの代わりにもなる）、セルエディタが閉じない。これとは別に、エラーメッセージを、表の上に赤字で表示してみた（下図）。

以下が、HTMLの全文。validateRequiredが、自作したバリデータになっている。

<!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;
}

.ez_error {
	/* red（エラー用） */
	color:#ff0000;
}

</style>

<script type="text/javascript" src="data.js"></script> 
<script type="text/javascript">

EzTable = function() {

	var myDataSource;
	var myDataTable;

	var Dom = YAHOO.util.Dom;

	// null値検証
	var validateRequired = function(oData){

		if(oData == null || oData.length == 0){
		    // エラーの場合、undefindを返せばいい。
		    Dom.get('ez_error_res').innerHTML = '入力してください.';
                    return undefined;
		}
		return oData;
	}

    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:validateRequired,
     					defaultValue:'入力してください.'
    	                	}
			),
                        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_validate2
<br>
<div id="main">
<p>いくつかのオプションを加えたサンプルです。<br/>
編集可能な部分はダブルクリックで変更できます。</p>
<div id="ez_error_res" class="ez_error"></div>
<div id="table1"></div>
<div id="result"></div>
</div>
</body> 
</html>

tetsuya_odakaの日記

YUI2.7.0のEditable Table（編集可能な表）でのバリデーション（その２：バリデータを自作する）