こんにちは。

今回ご紹介するのは『リッチテーブルのリンクを活性/非活性のように表示する方法』になります。

なぜタイトルが「～のように」となっているかと言うと、実は標準機能では実装できないからです。

リッチテーブルにリンク（”type”: “link”）を表示する場合、変数設定には以下のパラメータ項目が設定できます。

　　label　: リンクのテキストを指定
　　target : リンク先のURLを表示する場所を指定します。「_blank」を指定すると、リンク先を別タブまたは別ウインドウで開きます。
　　href　: リンク先のURLを指定

これらの項目ではリンク表示の「活性/非活性の制御」が行えないのです。

■設定サンプル

"dataSource": [
  {
    "ankenNo": "A0001",
    "ankenNm": "案件００１",
    "projectNo": {
      "label": "PJ00001",
      "target": "_self",
      "href": "http://www.xxxxxx",
    },
    "status": "起票中"
}],
"columnSettings": {
    "ankenNo": {
      "type": "string",
      "hiddenColumn": false
    },
    "ankenNm": {
      "type": "string",
      "hiddenColumn": false
    },
    "projectNo": {
      "type": "link",
      "hiddenColumn": true
    },
    "status": {
      "type": "string",
      "hiddenColumn": true
    }
}

では、どうやって”リンクを活性/非活性”したように見せたかというと、設定したのは以下の２点になります。

（１）リッチテーブルの表示するタイプにボタン（”type”: “button-action”）を設定。

　リッチテーブルに表示するタイプがアクションボタン（”type”: “button-action”）の場合、プロパティ設定できるパラメータ項目は

　以下が設定できます。

　　label : リンクのテキストを指定

　　disabled : 活性非活性の真偽値

　　hidden : 表示非表示の真偽値

■設定サンプル

"dataSource": [
    {
      "ankenNo": "A0001",
      "ankenNm": "案件００１",
      "projectNo": {
        "label": "PJ00001",
        "disables": false,
        "hidden": false
      },
      "status": "起票中"
    },
],

このアクションボタン（”type”: “button-action”）設定であれば活性非活性の設定が可能になります。

（２）CSS編集で上記１のボタンデザインをリンクに変換

　CSS編集を利用し、アクションボタンのデザインをスタイルシートの設定でリンク表示のように見える設定を行います。

　設定方法については、以下の通りとなります。

■CSS編集内容

/* リッチテーブル_ボタンデザイン設定 */
/* ┗通常時 */
.richTable_link_custom td >div >input[type=button] {
    background-color: transparent !important;
    color: #1080d5 !important;
    border: none !important;
}
/* ┗カーソルを当てたとき時 */
.richTable_link_custom td> div> input[type=button]:hover {
    background-color: transparent !important;
    color: #d51080 !important;
    text-decoration:underline;
}
/* ┗（読取り専用時）通常時 */
.richTable_link_custom td> div> input[type=button]:disabled {
    color: darkslategray !important;
    text-decoration:none;
}
/* ┗（読取り専用時）カーソルを当てたとき時 */
.richTable_link_custom td> div> input[type=button]:disabled:hover {
    color: darkslategray !important;
    text-decoration:none;
}
/* リッチテーブル_ボタン 左寄せ */
.im-hichee-im-richtable-td-inner{
  text-align: left !important;
}

■リッチテーブルのCSS設定

上記の設定をすることで、最終的に以下図のような表示が可能となります。

今回は標準で出来ない事のご紹介となりましたが、この方法を取ることでリンクからポップアップ画面を

呼び出しているように見せることもできますので、縁がありましたらご参考にして下さい。

それでは（^^）/~~