easyui datagridにmouseoverとmouseoutイベントを追加

jQueryに詳しい方は、datagridコンポーネントに詳しいに違いありません.専門のgridコンポーネントではありませんが、使い勝手はかなり便利で、機能もしっかりしています.1.2.4バージョンから、datagridはonRowContextMenuイベント、即行右ボタンイベントを追加しました.右ボタンメニューを処理するのに多く使われています.もう一つは表頭右ボタンイベントonHeaderContextMenuです.
しかし、プロジェクトを行うときにユーザーに右クリックしてからメニューをポップアップさせるのは、インタラクション的には友好的ではありません.マウスが通るとメニューをポップアップできるといいです.wordpressのバックグラウンドコメント管理ページのように、マウスがコメントリストを通ると「削除」、「審査」などの操作ボタンが表示されます.jQuery easyui datagridにmouseoverとmouseoutイベントを追加する方法は、実は簡単です.
まずjqueryを開きます.easyui.min.jsファイルは、自身がバインドされているonRowContextMenuイベントを検索し、ひょうたんに基づいてひょうたんを描くだけで簡単です.イベントを追加するだけで、複雑なコードにはほとんど関係なく、6019行程度で以下のコードを検索します.1 bind( "contextmenu.datagrid" , function (e){ 2 var _400=$( this ).attr( "datagrid-row-index" ); 3 if (opts.onRowContextMenu){ 4 opts.onRowContextMenu.call(_3fa,e,_400,data.rows[_400]); 5 } 6 });
同じように、デフォルト値は7405行程度です.1 onRowContextMenu: function (e,_576,_577){ 2 }
次に、次のようにバインドします.01 .bind( "mouseover.datagrid" , function (e){ 02 var _400=$( this ).attr( "datagrid-row-index" ); 03 if (opts.onRowMouseoverMenu){ 04 opts.onRowMouseoverMenu.call(_3fa,e,_400,data.rows[_400]); 05 } 06 }).bind( 'mouseout.datagrid' , function (e) { 07 var _400 = $( this ).attr( 'datagrid-row-index' ); 08 if (opts.onRowMouseoutMenu) { 09 opts.onRowMouseoutMenu.call(_3fa, e, _400, data.rows[_400]); 10 } 11 });
次に、既定値を設定します.1 onRowMouseoverMenu: function (e,_576,_577){ 2 },onRowMouseoutMenu: function (e,_576,_577){ 3 }
ここまでやっても、簡単でしょう.javascriptの原型継承メカニズムはまだ深く研究されていないので、毛皮の変更しかできません.
実際に適用する場合、この2つのイベントだけでは十分ではありません.メニューの遅延表示は、rowをすばやく通過した場合に遅延を中断し、直接表示しないようにします.settimeoutとcleartimeoutに合わせて使用し、easyui demoのdatagrid 3を変更します.htmlファイルを使用してプレゼンテーションを行います.
ここをクリックしてプレゼンテーションの効果を確認します