扩展:datagrid鼠标经过提示单元格内容
来源:互联网 发布:北京孙瑞雪小学知乎 编辑:程序博客网 时间:2024/06/06 02:47
$.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消息框的样式 * @return {} */ doCellTip:function (jq, params) { function showTip(showParams, td, e, dg) { //无文本,不提示。 if ($(td).text() == "") return; params = params || {}; var options = dg.data('datagrid'); showParams.content = '<div class="tipcontent">' + showParams.content + '</div>'; $(td).tooltip({ content:showParams.content, trackMouse:true, position:params.position, onHide:function () { $(this).tooltip('destroy'); }, onShow:function () { var tip = $(this).tooltip('tip'); if(showParams.tipStyler){ tip.css(showParams.tipStyler); } if(showParams.contentStyler){ tip.find('div.tipcontent').css(showParams.contentStyler); } } }).tooltip('show'); }; return jq.each(function () { var grid = $(this); var options = $(this).data('datagrid'); if (!options.tooltip) { var panel = grid.datagrid('getPanel').panel('panel'); 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[field]', { 'mouseover':function (e) { //if($(this).attr('field')===undefined) return; var that = this; var setField = null; if(params.specialShowFields && params.specialShowFields.sort){ for(var i=0; i<params.specialShowFields.length; i++){ if(params.specialShowFields[i].field == $(this).attr('field')){ setField = params.specialShowFields[i]; } } } if(setField==null){ options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body'); var factContentWidth = options.factContent.width(); params.content = $(this).text(); if (params.onlyShowInterrupt) { if (factContentWidth > $(this).width()) { showTip(params, this, e, grid); } } else { showTip(params, this, e, grid); } }else{ panel.find('.datagrid-body').each(function(){ var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]'); trs.each(function(){ var td = $(this).find('> td[field="' + setField.showField + '"]'); if(td.length){ params.content = td.text(); } }); }); showTip(params, this, e, grid); } }, 'mouseout':function (e) { if (options.factContent) { options.factContent.remove(); options.factContent = null; } } }); }); } }); }, /** * 关闭消息提示功能 * @param {} jq * @return {} */ cancelCellTip:function (jq) { return jq.each(function () { var data = $(this).data('datagrid'); if (data.factContent) { data.factContent.remove(); data.factContent = null; } var panel = $(this).datagrid('getPanel').panel('panel'); panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove') }); } });
传入参数列表:
doCellTip方法的参数包含以下属性:
$('#dg').datagrid('doCellTip', { onlyShowInterrupt:false, position:'bottom', tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'}, contentStyler:{backgroundColor:'#333', paddingLeft:'5px'} });
效果展示:
http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html
0 0
- 扩展:datagrid鼠标经过提示单元格内容
- 扩展:datagrid鼠标经过提示单元格内容
- 扩展:datagrid鼠标经过提示单元格内容
- 扩展:datagrid鼠标经过提示单元格内容
- 扩展:easyui datagrid鼠标经过提示单元格内容
- easyui扩展:datagrid鼠标经过提示单元格内容(6)
- datagrid鼠标经过提示单元格内容
- EasyUI datagrid 列包含超链接以及鼠标经过提示单元格内容
- [easyui]datagrid鼠标移动显示单元格内容
- EasyUI Datagrid 鼠标悬停显示单元格内容
- EasyUI Datagrid 鼠标悬停显示单元格内容
- EasyUI Datagrid 鼠标悬停显示单元格内容
- 鼠标经过时,展示提示内容
- datagrid列名居中、数据居左、鼠标悬浮单元格内容有提示
- EXT.NET GridPanel 鼠标经过列位置tip提示内容
- Easyui 表格datagrid 的单元格内容显示方式扩展
- 鼠标经过,出现提示
- 鼠标经过,出现提示
- Linux那些事儿 之 戏说USB(6)好戏开始了
- UGUI学习——Canvas
- Android 获取设备分辨率
- 2015程序员小白理财记
- AsyncTask -- Java异步调用框架
- 扩展:datagrid鼠标经过提示单元格内容
- ireport 打印pdf 为空
- linux学习笔记1
- iosinHouse发布应用
- 移动核心网虚拟化演进趋势探讨
- tableview隐藏点击效果
- 求进制顺序和逆序(算法)
- NIO实现UDP数据传输(一)
- classpath、path、JAVA_HOME的作用及JAVA环境变量配置