The doCellTip of EasyUI allows you to move the mouse over a cell to prompt the cell content. easyuidocelltip
1: I copied this item (I cannot remember where it was copied). The pop-up window with no style is not very nice.
// Scale $. extend ($. fn. datagrid. methods, {/*** open the prompt function * @ param {} jq * @ param {} params prompt message box style * @ return {} */doCellTip: function (jq, params) {function showTip (data, td, e) {if ($ (td ). text () = "") return; data.tooltip.text(((td).text()).css ({top: (e. pageY + 10) + 'px ', left: (e. pageX + 20) + 'px ', 'z-Index': $. fn. window. defaults. zIndex, display: 'block'}) ;}; return jq. each (function () {v Ar grid = $ (this); var options = $ (this). data ('datagrid '); if (! Options. tooltip) {var panel = grid. datagrid ('getpanel '). panel ('panel '); var defaultCls = {'border': '1px solid #333', 'padding': '1px ', 'color':' #333 ', 'background': '# f7f5d1', 'position': 'absolute ', 'max-width': '200px', 'border-radius ': '4px ', '-moz-border-radius': '4px ','-webkit-border-radius ': '4px', 'display ': 'none'} var tooltip =$ ("<div> </div> "). appendTo ('body'); tooltip.css ($. Extend ({}, defaultCls, params. cls); options. tooltip = tooltip; panel. find ('. datagrid-body '). each (function () {var delegateEle = $ (this ). find ('> div. datagrid-body-inner '). length? $ (This ). find ('> div. datagrid-body-inner ') [0]: this; $ (delegateEle ). undelegate ('td ', 'mouseover '). undelegate ('td ', 'mouseout '). undelegate ('td ', 'mousemove '). delegate ('td ', {'mouseover': function (e) {if (params. delay) {if (options. tipDelayTime) clearTimeout (options. tipDelayTime); var that = this; options. tipDelayTime = setTimeout (function () {showTip (options, that, e) ;}, params. delay) ;}else {showTip (options, this, e) ;}, 'mouseout': function (e) {if (options. tipDelayTime) clearTimeout (options. tipDelayTime); options.tooltip.css ({'display': 'none'}) ;}, 'mousemove ': function (e) {var that = this; if (options. tipDelayTime) {clearTimeout (options. tipDelayTime); options. tipDelayTime = setTimeout (function () {showTip (options, that, e) ;}, params. delay) ;}else {showTip (options, that, e );}}});});}});}, /*** disable the message prompting function * @ param {} jq * @ return {} */cancelCellTip: function (jq) {return jq. each (function () {var data = $ (this ). data ('datagrid '); if (data. tooltip) {data. tooltip. remove (); data. tooltip = null; var panel = $ (this ). datagrid ('getpanel '). panel ('panel '); panel. find ('. datagrid-body '). undelegate ('td ', 'mouseover '). undelegate ('td ', 'mouseout '). undelegate ('td ', 'mousemove')} if (data. tipDelayTime) {clearTimeout (data. tipDelayTime); data. tipDelayTime = null ;}});}});
Call Method 1:
function doCellTip(){ $('#dg').datagrid('doCellTip',{'max-width':'100px'}); } function cancelCellTip(){ $('#dg').datagrid('cancelCellTip'); }
Call Method 2:
onLoadSuccess:function(data){ $('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000}); }
The above is the doCellTip Implementation of EasyUI, which is introduced by the editor. You can place the mouse over the cell to prompt the cell content. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!