Easyui DataGrid method Extension-ToolTip

The latest version of the jquery Easyui a new component called ToolTip, which is the prompt box. The previous version did not have this component when there are a lot of questions in the cell of the DataGrid, I want to add a mouse to prompt how to do. Originally I told them the method is to use formatter, the approximate method is as follows:

Formatter:function (value) {    return ' <span title= ' +value+ ' "> ' +value+ ' <span> ';}

　　

In this way, the browser's own title feature is used to achieve the display effect. But the effect of this is not very much thinking. Thankfully, with the ToolTip component from the 1.3.3+ version, I can further customize our cue message.

The specific extension methods are as follows:

/** * DataGrid extension method tooltip based on Easyui 1.3.3, can be used for easyui1.3.3+ * Simple implementation, for advanced features, You can freely modify * instructions: * After easyui.min.js import this JS * code case: *$ ("#dg"). DataGrid ({...}). DataGrid (' ToolTip '); All Columns *$ ("#dg"). DataGrid ({...}). DataGrid (' tooltip ', [' ProductID ', ' ListPrice '); Specify column * @author ____′ Shahi */$.extend ($.fn.datagrid.methods, {tooltip:function (JQ, fields) {return Jq.each (function () {var Panel = $ (this). DataGrid (' Getpanel '), if (Fields && typeof fields = = ' object ' && fields.sort) {$.each (Fiel DS, Function () {var field = this;bindevent ($ ('. Datagrid-body td[field= ' + field + ']. Datagrid-cell ', panel));}); else {bindevent ($ (". Datagrid-body. Datagrid-cell", panel));}); function Bindevent (JQS) {jqs.mouseover (function () {var content = $ (this). text (); $ (this). ToolTip ({content:content, Trackmouse:true,onhide:function () {$ (this). ToolTip (' Destroy ');}}). ToolTip (' Show ');}}); 

Original address: Http://www.jeasyuicn.com/the-extended-datagrid-method---tooltip.html

Easyui DataGrid method Extension-ToolTip