Wijmo UI for the Web
カスタムコンテキストメニューの作成

Wijgrid は、個々のセルのコンテキストメニューに対し、個別にカスタマイズした項目を追加できるという柔軟性を備えています。次のサンプルスクリプトでは、新たな 4 つの項目をコンテキストメニューに追加します。このうち 1 つは「リフレッシュ」オプションであり、他の項目はそれぞれ「Menu1」、「Menu2」、「Menu3」となります。ユーザーは必要に応じてこれらの項目をカスタマイズし、関数またはリンクを追加することもできます。

コンテキストメニューは、Mozilla Firefox Web ブラウザのみで動作します。
スクリプト
コードのコピー
<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
            data: [
                { User_ID: '001', Name: 'John', Country: 'US' },
                { User_ID: '002', Name: 'Tom', Country: 'Japan' },
                { User_ID: '003', Name: 'Henry', Country: 'China' }
            ],
            selectionMode:'singleCell',
            editingMode: 'cell'
        });

        // Start Editing after clicking enter key
        $('#wijgrid').closest('.wijmo-wijgrid').keydown(function (e) {
            if (e.which == '13') {
                $('#wijgrid').wijgrid('beginEdit');
            }
        });
    });
</script>
マークアップ
コードのコピー
<table id="wijgrid"></table>
<div contextmenu="mymenu" style="width:200px">
<p> <i> Right Click here to see context menu </i> </p>
<menu type="context" id="mymenu">
 <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
 <menuitem label="Menu1"></menuitem>
<menuitem label="Menu2"></menuitem>
<menuitem label="Menu3"></menuitem>
</menu>
</div>

 

 


Copyright © GrapeCity inc. All rights reserved.