ここで教えていただきました。
< コード例 >
HTML
<!-- 空港テーブル本体 --> <div id="aptable" class="main_table"></div> <!-- コンテキストメニュー --> <div id="aptable_contextmenu" class="contextmenu-wrapper" style="display: none;"> <div class="contextmenu-contents apcntxtdiv"> <!-- 出発ライブ --> <ul id="cntxt_livemap_ul_arv" class="curpo apcntxt"> <img id="cntxt_livemap_icon_arv" src="Img/arrival_48_green.png" width="18" /> <span id="cntxt_livemap_arv">Show arrival LiveMap</span> </ul> <!-- 到着ライブ --> <ul id="cntxt_livemap_ul_dep" class="curpo apcntxt"> <img id="cntxt_livemap_icon_dep" src="Img/departure_48_blue.png" width="18" /> <span id="cntxt_livemap_dep">Show departure LiveMap</span> </ul> <!-- 出発ステータスリンク --> <ul id="cntxt_status_ul_arv" class="curpo apcntxt"> <img id="cntxt_status_icon_arv" src="Img/arrival_48_green.png" width="18" /> <span id="cntxt_status_arv">Open arrival status</span> </ul> <!-- 到着ステータスリンク --> <ul id="cntxt_status_ul_dep" class="curpo apcntxt"> <img id="cntxt_status_icon_dep" src="Img/departure_48_blue.png" width="18" /> <span id="cntxt_status_dep">Open departure status</span> </ul> <!-- SkyVector --> <ul id="cntxt_skyvec_ul" class="curpo apcntxt"> <img id="cntxt_skyvec_icon" src="Img/skyvector.png" width="18" /> <span id="cntxt_skyvec">Open SkyVector</span> </ul> <!-- Airnav --> <ul id="cntxt_airnav_ul" class="curpo apcntxt"> <img id="cntxt_airnav_icon" src="Img/airnav.png" width="18" /> <span id="cntxt_airnav">Open AirNav</span> </ul> <!-- FlightPlan --> <ul id="cntxt_fplan_ul" class="curpo apcntxt"> <img id="cntxt_fplan_icon" src="Img/flightplan_icon.png" width="18" /> <span id="cntxt_fplan">Open FlightPlan</span> </ul> <!-- LiveATC --> <!--<ul id="cntxt_liveatc_ul" class="curpo apcntxt"> <img id="cntxt_liveatc_icon" src="Img/liveatc.png" width="18" /> <span id="cntxt_liveatc">Open LiveATC</span> </ul>--> </div> </div>
カラムのセルコンテキストイベントから自作メニューを呼ぶ
// 行番号 //
{
title: 'No.',
field: 'rowno',
formatter: 'rownum',
frozen: true,
width: 16,
hozAlign: 'right',
cssClass: 'cell_num',
cellContext: function (event, cell) {
//event - the click event object
//cell - cell component
const row = cell.getRow()
$(".apcntxtdiv").show()
// 通常の右クリックメニューを停止 //
event.preventDefault()
// 代わりに自作のメニューを表示 //
showNoContextMenu(row, event.pageX, event.pageY)
}
},
自作メニュー
/**
* No列コンテキストメニュー
* @param {type} row 行オブジェクト
* @param {type} posx ページX位置
* @param {type} posy ページY位置
* @returns {undefined}
*/
const showNoContextMenu = (row, posx, posy) => {
const cm = document.getElementById("aptable_contextmenu")
// 行のデータ //
const icao = row.getData().cdIcao
const iata = row.getData().cdIata
const city = row.getData().nmCity
const apname = row.getData().nmAirport
// 非表示をやめて、クリックした位置に表示する
cm.style.left = (eval(posx) + eval(20)) + 'px'
cm.style.top = (eval(posy) + eval(10)) + 'px'
cm.style.display = ''
// メニューのテキストを列の値で変更 //
$("#cntxt_livemap_arv").text(iata + " Show arrival LiveMap")
$("#cntxt_livemap_dep").text(iata + " Show departure LiveMap")
$("#cntxt_status_arv").text(iata + " Open arrival status")
$("#cntxt_status_dep").text(iata + " Open departure status")
$("#cntxt_skyvec").text(icao + " Open SkyVector")
$("#cntxt_airnav").text(icao + " Open AirNav")
$("#cntxt_fplan").text(icao + " Open FlightPlan")
$("#cntxt_liveatc").text(icao + " Open LiveATC")
$(".apcntxt").show()
$(".apcntxt").off("click")
// @@ アイテムをクリックした時 @@ //
$(".apcntxt").on("click", function (e) {
cm.style.display = 'none'
const id = $(this).attr("id")
// == id別の処理 省略 == //
})
}
< 画面例 >