[隐藏]

• 1实现代码
• 2入参列表
• 3使用示例
• 4效果演示

1. $.extend($.fn.datagrid.methods, {
2. /**
3. * 开打提示功能
4. * @param {} jq
5. * @param {} params 提示消息框的样式
6. * @return {}
7. */
8. doCellTip:function (jq, params) {
9. function showTip(showParams, td, e, dg) {
10. //无文本，不提示。
11. if ($(td).text() == "") return;
12. params = params || {};
13. var options = dg.data('datagrid');
14. showParams.content = '<div class="tipcontent">' + showParams.content + '</div>';
15. $(td).tooltip({
16. content:showParams.content,
17. trackMouse:true,
18. position:params.position,
19. onHide:function () {
20. $(this).tooltip('destroy');
21. },
22. onShow:function () {
23. var tip = $(this).tooltip('tip');
24. if(showParams.tipStyler){
25. tip.css(showParams.tipStyler);
26. }
27. if(showParams.contentStyler){
28. tip.find('div.tipcontent').css(showParams.contentStyler);
29. }
30. }
31. }).tooltip('show');
32. };
33. return jq.each(function () {
34. var grid = $(this);
35. var options = $(this).data('datagrid');
36. if (!options.tooltip) {
37. var panel = grid.datagrid('getPanel').panel('panel');
38. panel.find('.datagrid-body').each(function () {
39. var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
40. $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td[field]', {
41. 'mouseover':function (e) {
42. //if($(this).attr('field')===undefined) return;
43. var that = this;
44. var setField = null;
45. if(params.specialShowFields && params.specialShowFields.sort){
46. for(var i=0; i<params.specialShowFields.length; i++){
47. if(params.specialShowFields[i].field == $(this).attr('field')){
48. setField = params.specialShowFields[i];
49. }
50. }
51. }
52. if(setField==null){
53. options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');
54. var factContentWidth = options.factContent.width();
55. params.content = $(this).text();
56. if (params.onlyShowInterrupt) {
57. if (factContentWidth > $(this).width()) {
58. showTip(params, this, e, grid);
59. }
60. } else {
61. showTip(params, this, e, grid);
62. }
63. }else{
64. panel.find('.datagrid-body').each(function(){
65. var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');
66. trs.each(function(){
67. var td = $(this).find('> td[field="' + setField.showField + '"]');
68. if(td.length){
69. params.content = td.text();
70. }
71. });
72. });
73. showTip(params, this, e, grid);
74. }
75. },
76. 'mouseout':function (e) {
77. if (options.factContent) {
78. options.factContent.remove();
79. options.factContent = null;
80. }
81. }
82. });
83. });
84. }
85. });
86. },
87. /**
88. * 关闭消息提示功能
89. * @param {} jq
90. * @return {}
91. */
92. cancelCellTip:function (jq) {
93. return jq.each(function () {
94. var data = $(this).data('datagrid');
95. if (data.factContent) {
96. data.factContent.remove();
97. data.factContent = null;
98. }
99. var panel = $(this).datagrid('getPanel').panel('panel');
100. panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
101. });
102. }
103. });

1. $('#dg').datagrid('doCellTip',
2. {
3. onlyShowInterrupt:false,
4. position:'bottom',
5. tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'},
6. contentStyler:{backgroundColor:'#333', paddingLeft:'5px'}
7. });