WEBやシステムの情報をメモ程度にまとめるブログです。

w2ui システム開発

w2uiグリッドの検索機能を有効にする

Byにど寝

7月 2, 2020 #w2ui1.5
w2ui

今回は、w2uiの検索UIを有効にしていきます。

ポイントになるのは、２つのプロパティになります。

 

showプロパティでtoolberを有効にする

グリッドのプロパティに下記コードのようにtoolberを有効にする設定を追記します。

グリッドのshowプロパティの詳細は下記URLを参照。

http://w2ui.com/web/docs/1.5/w2grid.show

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	postData:	{BaseGenreId:0},
	show: { 
		toolbar: true
	},        
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px' ,render: 'money',style:'text-align: right' },
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px' ,render: 'int',style:'text-align: right' },
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px' ,render: 'int',style:'text-align: right' }
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

 

実行結果は、次の画像のようになります。

 

検索対象の項目を指定する

toolberを有効にしたら、検索対象の項目を指定します。

searchesプロパティを追記して、検索項目を指定していきます。

searchesプロパティの詳細は、下記URLを参照。

http://w2ui.com/web/docs/1.5/w2grid.searches

 

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	postData:	{BaseGenreId:0},
    show: { 
        toolbar: true
    },        
    searches: [
        { field: 'rank', caption: '順位 ', type: 'int' },
        { field: 'catchcopy', caption: 'キャッチコピー', type: 'text' },
        { field: 'itemName', caption: '商品名', type: 'text' },
        { field: 'itemPrice', caption: '価格', type: 'money' },
        { field: 'itemUrl', caption: '商品URL', type: 'text' },
        { field: 'shopName', caption: '店舗名', type: 'text' },
        { field: 'reviewCount', caption: 'レビュー数', type: 'int' },
        { field: 'reviewAverage', caption: 'レビュー平均', type: 'int' }
    ],        
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px' ,render: 'money',style:'text-align: right' },
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px' ,render: 'int',style:'text-align: right' },
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px' ,render: 'int',style:'text-align: right' }
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

 

実行イメージはこんな感じです。

 

全フィールド検索の設定

全フィールド検索でテキスト検索を行う場合、デフォルトでは前方一致になるので『含む』条件で検索するように設定します。

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	postData:	{BaseGenreId:0},
        show: { 
            toolbar: true
        },
        textSearch:'contains',
        searches: [
            { field: 'rank', caption: '順位 ', type: 'int' },
            { field: 'catchcopy', caption: 'キャッチコピー', type: 'text' },
            { field: 'itemName', caption: '商品名', type: 'text' },
            { field: 'itemPrice', caption: '価格', type: 'money' },
            { field: 'itemUrl', caption: '商品URL', type: 'text' },
            { field: 'shopName', caption: '店舗名', type: 'text' },
            { field: 'reviewCount', caption: 'レビュー数', type: 'int' },
            { field: 'reviewAverage', caption: 'レビュー平均', type: 'int' }
        ],        
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px' ,render: 'money',style:'text-align: right' },
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px' ,render: 'int',style:'text-align: right' },
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px' ,render: 'int',style:'text-align: right' }
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

 

複数項目をOR検索する場合の設定

デフォルトでは、複数の項目に対して検索を行う場合、AND検索になります。

これをOR検索にするには、searchLogicをORで指定します。

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	searchLogic:'OR',
	postData:	{BaseGenreId:0},
        show: { 
            toolbar: true
        },
        textSearch:'contains',
        searches: [
            { field: 'rank', caption: '順位 ', type: 'int' },
            { field: 'catchcopy', caption: 'キャッチコピー', type: 'text' },
            { field: 'itemName', caption: '商品名', type: 'text' },
            { field: 'itemPrice', caption: '価格', type: 'money' },
            { field: 'itemUrl', caption: '商品URL', type: 'text' },
            { field: 'shopName', caption: '店舗名', type: 'text' },
            { field: 'reviewCount', caption: 'レビュー数', type: 'int' },
            { field: 'reviewAverage', caption: 'レビュー平均', type: 'int' }
        ],        
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px' ,render: 'money',style:'text-align: right' },
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px' ,render: 'int',style:'text-align: right' },
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px' ,render: 'int',style:'text-align: right' }
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

 

 

まとめ

これで見た目上、w2uiのグリッドで検索ができそうな感じになりました。

ただこれだけでは、MySQLから検索データを取得できませんので、PHP側でも処理が必要になります。

次回サーバー側での処理を記事にできたらと思います。

 

By にど寝

もともと名古屋でシステムエンジニアをしてましたが、現在は地元に帰省してネットショップの社内システムエンジニアをしてます。  

Related Post

Claris FileMaker システム開発

Claris FileMaker｜CSVの改行コードを変換する。

1月 26, 2023 にど寝
Claris FileMaker システム開発

Claris FileMaker｜WEBビューアに入力したHTMLを表示

10月 12, 2022 にど寝
PHP システム開発

PHPで指定時間経過したファイルを削除

3月 4, 2021 にど寝

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

その他記事

Claris FileMaker システム開発

Claris FileMaker｜CSVの改行コードを変換する。

2023年1月26日 にど寝
Claris FileMaker システム開発

Claris FileMaker｜WEBビューアに入力したHTMLを表示

2022年10月12日 にど寝
Claris FileMaker

Claris FileMaker｜プラグインをインストールする

2021年6月15日 にど寝
Claris FileMaker

Claris FileMaker｜URLからファイル名のみ抽出

2021年4月23日 にど寝