JSダイアログボックスで画面を表示

1.問題の説明

組み込みのハイパーリンク-ダイアログボックスのみでは、テーブルを開く需要を満たせない場合があります。

ボタンをクリックしてハイパーリンクジャンプを実現する場合は、カスタムJSによりダイアログボックスからテーブルを開くことができます。下図のとおりです。

2.方法

FRの組み込みJSメソッドshowDialog、doHyperlinkByPost、またはdoHyperlinkByGetを利用することにより、テーブルを開きます。

1.テンプレートデザイン

次の図に示すように、新規テンプレートを作成し、セルB2にテキスト「帳票を開く」を入力します。

2.JSコードを追加する

次の図に示すように、セルB2を選択し、ハイパーリンク-JavaScriptスクリプトを追加します。

JavaScriptコードは次のとおりです。

注：コード内のテンプレートパスは、実際のテンプレートの保存先に応じて調整してください。ダイアログボックスの高さと幅も調整できます。コードのコメントを参照してください。

//テンプレート保存先
var url = encodeURI(encodeURI("/webroot/decision/view/report?viewlet=demo-jp/parameter/connect.cpt"));
//ウィンドウ
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
//ウィンドウのsrc属性をテンプレートパスと設定します
$iframe.attr("src", url);
//ウィンドウの属性
var o = {
    title: "ダイアログボックス",    //タイトル
    width: 680,         //幅
    height: 640,        //高さ
    //closable:true,    //閉じるボタンを表示するかどうか、デフォルトではtrueです
    //confirm:true,     //確認・取消ボタンを追加するかどうか、デフォルトではfalseです。
    //draggable:true   //ドロップできるかどうか、デフォルトではtrueです
};
//ポップアップウィンドウ
FR.showDialog(o.title, o.width, o.height, $iframe, o);

doHyperlinkByPostコードは次のとおりです。

FR.doHyperlinkByPost({
             //テーブル保存先
 "url":"/webroot/decision/view/report?viewlet=demo-jp/parameter/connect.cpt",    //パラメーター
             "para":{
                         "__pi__":true,    //パラメーターパネルを表示するか
                         "エリア":"中国東部"
                         },
             "target":"_dialog",    //ダイアログボックスにより開く
             "feature":{
                         "width":600,
                         "height":400,
                          "isCenter":true,     //中央に表示するかどうか
                         "title":"タイトル"
                         }
             })

doHyperlinkByGetコードは次のとおりです。

FR.doHyperlinkByGet({
             //テーブル保存先
 "url":"/webroot/decision/view/report?viewlet=demo-jp/parameter/connect.cpt",    //パラメーター
             "para":{
                         "__pi__":true,    //パラメーターパネルを表示するか
                         "エリア":"中国東部"
                         },
             "target":"_dialog",    //ダイアログボックスにより開く             "feature":{
                         "width":600,
                         "height":400,
                          "isCenter":true,     //中央に表示するかどうか
                         "title":"タイトル"
                         }
             })

3.プレビュー

テーブルを保存し、改ページプレビューをクリックします。

注：モバイル端末に対応していません

組み込みのJSメソッドshowDialogではダイアログボックスによりハイパーリンクを開いたときに、ダイアログボックスが変更できます。コードの後に対象スタイルのコードを追加してください。

1.タイトルを中央に配置します

$('.fr-core-window-header ').css("text-align", "center");

2.タイトルの背景色を変更します

$('.fr-core-window-header ').css("background","red");

3.ダイアログボックスの右上隅にあるウィンドウを閉じるボタンを非表示にします

$('.fr-core-panel-tool-close').hide();

4.ダイアログボックスのタイトルテキストを削除します

$('.fr-core-panel-title').hide();

5.ダイアログボックスのタイトルテキスト色を変更します

$('.fr-core-panel-title').css("color","blue")

6.ダイアログボックスの上部にあるフィレットを直角に変更します

$('.fr-core-window').css("border-radius", "0 0 0 0");
$('.fr-core-window-header').css("border-radius", "0 0 0 0")