セルプロパティをスタイルにより設定する

<< Click to Display Table of Contents >>

マニュアル > コントロールリファレンス > 基本 > グリッドコントロール > 機能説明 > グリッドのプロパティ設定 >

セルプロパティをスタイルにより設定する

スタイルを使用したセルプロパティの指定

セルプロパティの設定値の組み合わせを、あらかじめ「スタイル」として各列(もしくは各行)に登録しておく事ができます。通常はこの設定方法を推奨します。

 

スタイルを登録しておく事で、グリッドに新たな行や列が追加された際に、スタイルとして登録された各種設定値がセルプロパティのデフォルト値として採用されます。

グリッドに表示される行数が動的に変わるような場合や、列単位で表示する表示様式を変えたいような場合には、この方法が適しています。

 

(列ごとに異なる表示形式を指定したイメージ)

cr_0185

 

 

各列ごと(または各行ごと)のスタイルを定義するには、以下のメソッドを利用します。

 

AddStyle

・・・ スタイルを定義します。各スタイルには一意のスタイル名を付与します。

SetDefaultStyle  

・・・ AddStyleで定義したスタイルを各列に割り当てます。

 

AddStyleメソッドで登録したスタイルを、SetDefaultStyleメソッドで各列(もしくは各行)のスタイルとして割り当てることにより、AddRow / AddCol / InsertRow / InsertCol メソッドや、Rows / Cols プロパティなどによって新たな行(もしくは列)が追加された際に、スタイルとして割り当てられた各種設定値がセルプロパティのデフォルト値として採用される動作となります。

 

 

以下は、スタイルを用いたスクリプトの記述例です。

	// スタイルを適用する列を用意
	this.Cols = 10;
	this.Rows = 0;

	// AddStyleにより、スタイルの追加
	this.AddStyle(
		c("styleLabel"     , "CellType:label"),	
		c("styleEdit"      , "CellType:edit"),
		c("styleMeter"     , "CellType:meter"),
		c("styleLamp"      , "CellType:lamp"),
		c("styleSwitch"    , "CellType:switch"),
		c("styleButton"    , "CellType:button", "TextColor:@TextColor"),
		c("styleSideButton", "CellType:sidebutton"),
		c("styleCombo"     , "CellType:combo", "ComboType:DROPDOWNLIST", "TextList:data1"+::RET()+"data2"+::RET()+"data3"),
		c("styleImage"     , "CellType:image", "File:" + "image.png"),
		c("styleFill1"     , "FillColor:#000000", "TextColor:@SelectColor"),
		c("styleFill2"     , "FillColor:#000000", "TextColor:#FFFFFF")
	);
 
	// 列ごとのスタイルを設定
	this.SetDefaultStyle("col",
		c(
			"styleLabel, styleFill1", 
			"styleEdit, styleFill2", 
			"styleMeter, styleFill1", 
			"styleLamp, styleFill1", 
			"styleSwitch, styleFill1", 
			"styleButton", 
			"styleSideButton, styleFill2", 
			"styleCombo, styleFill2", 
			"styleImage", 
			"styleLabel, styleFill1"
		)
	);	

	// 行を追加
	this.AddRow(10);

	// 列の幅を設定
	this.SetColWidth(0, c(70, 70, 100, 50, 50, 100, 100, 100, 80, 500));
	// ヘッダのタイトル設定
	this.SetRowData(-1, c("label", "edit", "meter", "lamp", "switch", "button", "sidebutton", "combo", "image"), F);

 

 

■解説

 

1)

スタイルを設定する列数(または行数)を指定

 

スタイルを設定する列数(または行数)をあらかじめ用意しておきます。

例えば、列に対してスタイルを設定する場合、その列数をColsプロパティで指定します。またこの場合、スタイルは追加される行に対して適用されるため、Rowsプロパティは0を指定します。

	this.Cols = 10;
	this.Rows = 0;

 

2)

スタイルの定義

 
スタイルとは、あるセル範囲単位(行ごと、列ごとなど)でセルプロパティを事前に定義したものです。スタイルを定義するには、AddStyleメソッドを利用します。

	this.AddStyle(
		c("styleLabel"     , "CellType:label"),	
		c("styleEdit"      , "CellType:edit"),
		c("styleMeter"     , "CellType:meter"),
		c("styleLamp"      , "CellType:lamp"),
		c("styleSwitch"    , "CellType:switch"),
		c("styleButton"    , "CellType:button", "TextColor:@TextColor"),
		c("styleSideButton", "CellType:sidebutton"),
		c("styleCombo"     , "CellType:combo", "ComboType:DROPDOWNLIST", "TextList:data1"+::RET()+"data2"+::RET()+"data3"),
		c("styleImage"     , "CellType:image", "File:" + "image.png"),
		c("styleFill1"     , "FillColor:#000000", "TextColor:@SelectColor"),
		c("styleFill2"     , "FillColor:#000000", "TextColor:#FFFFFF")
	);	

 
AddStyleメソッドでは、パラメータとしてスタイル定義配列を複数指定する事ができます。スタイル定義配列は以下の形式で指定します。

c(スタイル名(文字列), セルプロパティ(文字列))

 

 

3)

列(または行)単位のスタイルを設定

 

ここでは、列ごとにスタイルを設定する方法を説明します。SetDefaultStyleメソッドを利用して、事前に定義していたスタイルを行ごとに設定します。

	this.SetDefaultStyle("col",
 		c(
			"styleLabel, styleFill1", 
			"styleEdit, styleFill2", 
			"styleMeter, styleFill1", 
			"styleLamp, styleFill1", 
			"styleSwitch, styleFill1", 
			"styleButton", 
			"styleSideButton, styleFill2", 
			"styleCombo, styleFill2", 
			"styleImage", 
			"styleLabel, styleFill1"
		)
        );	

 

SetDefaultStyle メソッドでは、第1パラメータに ”col”(列単位)か ”row”(行単位)のいずれかを渡します。列単位にスタイルを指定する場合、”col”を指定します。

 

そして、第2パラメータでは、列ごとのスタイルを配列で指定します。

c(1列目のスタイル名, 2列目のスタイル名, ...)

 

尚、各列に割り当てるスタイル名は、複数のスタイルを同時に割り当てることもできます。その場合は、複数のスタイル名をカンマ区切りで列挙し、ダブルクォーテーションで括ります。

c("スタイル名1, スタイル名2, スタイル名3", スタイル名1, "スタイル名1, スタイル名4", ...)

 

 

attention

セルのプロパティ(背景色、文字の色、文字の位置、点滅など)を設定する場合、予めセルタイプを設定する必要があります。SetDefaultStyleメソッドでスタイル名を指定する際は、各スタイルの先頭でCellTypeが指定されている必要があります。

例)

// スタイルの定義

this.AddStyle(

         c("styleLabel"   , "CellType:label"),        

         c("styleFill1"     , "FillColor:#000000", "TextColor:@SelectColor")

);        

 

// CellTypeの設定があるstyleLabelを先に指定する

this.SetDefaultStyle("col",c("styleLabel, styleFill1"));

 

// 以下はNG

this.SetDefaultStyle("col",c("styleFill1, styleLabel"));

 

 

 

hint

SetDefaultStyleメソッドで複数のスタイル名をカンマ区切りで指定した場合、各スタイルで重複したセルプロパティの設定がある場合、後方が有効となります。例えば、以下の場合ではstyleLabelとstyleFill1両方でFillColorプロパティの指定がありますが、SetDefaultStyleメソッドでのスタイル名を指定する際、styleFill1が後方となるため「FillColor:#000000」が有効となります。

// スタイルの定義

this.AddStyle(

         c("styleLabel"   , "CellType:label", "FillColor:#C0C0C0"),        

         c("styleFill1"     , "FillColor:#000000", "TextColor:@SelectColor")

);        

 

// 複数のスタイルを指定

this.SetDefaultStyle("col",c("styleLabel, styleFill1"));

 

 

 

 

4)

行(列)を追加

 
AddRowメソッドで追加したい行数分追加します。ここでは例として10行としています。

	this.AddRow(10);

 

hint

SetDefaultStyleメソッドで列ごとのスタイルが定義してある状態で行を追加すると、追加された行はスタイルが適用された状態となります。

 

Rowsプロパティ値を変更してもAddRowメソッドと同様の動作となります。

 

 

 

5)

列の幅を指定

 
SetColWidthメソッドで列ごとの幅を設定します。

	this.SetColWidth(0, c(70, 70, 100, 50, 50, 100, 100, 100, 80, 500));

 

hint

上記の例の方法以外にも、列/行プロパティによって列の幅を一括で設定することもできます。詳しくは「列/行プロパティを設定する」を参照下さい。

 

 

6)

ヘッダ、および各セルへデータを設定

 
SetData / SetTableData / SetColData / SetRowData でヘッダ、および各セルへデータを設定します。

        this.SetRowData(-1, c("label", "edit", "meter", "lamp", "switch", "button", "sidebutton", "combo", "image"), F);

 

hint

ヘッダ、および各セルへデータを設定するデータは、CellTypeごとに設定データが異なります。詳しくはSetDataメソッドを参照下さい。

 

 

 

hint

上記の例ではスタイルの設定を列ごとに行う方法について説明しましたが、行ごと(もしくは全体)にスタイルを設定することも可能です。