基于1.3.3版本tooltip的datagrid单元格tip实现
来源:互联网 发布:java用循环打印五角星 编辑:程序博客网 时间:2024/05/16 19:48
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也不咋的,但是终归也是官方出品,同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:
实现代码
- /**
- * Created with JetBrains WebStorm.
- * User: cao.guanghui
- * Date: 13-6-26
- * Time: 下午11:27
- * To change this template use File | Settings | File Templates.
- */
- $.extend($.fn.datagrid.methods, {
- /**
- * 开打提示功能(基于1.3.3+版本)
- * @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');
- var styler = 'style="';
- if(showParams.width){
- styler = styler + "width:" + showParams.width + ";";
- }
- if(showParams.maxWidth){
- styler = styler + "max-width:" + showParams.maxWidth + ";";
- }
- if(showParams.minWidth){
- styler = styler + "min-width:" + showParams.minWidth + ";";
- }
- styler = styler + '"';
- showParams.content = '<div class="tipcontent" ' + styler + '>' + 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;
- }
- }
- });
- });
- }
- });
- },
- /**
- * 关闭消息提示功能(基于1.3.3版本)
- * @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方法的参数包含以下属性:
使用示例
- function doCellTips(onlyShowInterrupt) {
- $('#dg').datagrid('doCellTip', {
- onlyShowInterrupt : onlyShowInterrupt,
- position : 'bottom',
- maxWidth : '200px',
- specialShowFields : [ {
- field : 'status',
- showField : 'statusDesc'
- } ],
- tipStyler : {
- 'backgroundColor' : '#fff000',
- borderColor : '#ff0000',
- boxShadow : '1px 1px 3px #292929'
- }
- });
- }
效果演示
http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html
转自 : http://www.easyui.info/archives/1330.html
0 0
- 基于1.3.3版本tooltip的datagrid单元格tip实现
- 基于1.3.3版本tooltip的datagrid单元格tip实现
- 基于1.3.3版本tooltip的datagrid单元格tip实现
- easyui datagrid 的 tip实现
- DataGrid实现tooltip功能
- DataGrid实现tooltip功能
- DataGrid实现tooltip功能
- DataGrid实现tooltip功能
- DataGrid实现tooltip功能
- DataGrid实现tooltip功能
- DataGrid实现单元格合并
- vaddin grid实现每个单元格的ToolTip(鼠标放在单元格显示出单元格的内容)
- 基于bootstrup 3的jQuery tooltip插件
- 取datagrid的单元格
- Ajax实现DataGrid/DataList动态ToolTip
- Ajax实现DataGrid/DataList动态ToolTip
- Ajax实现DataGrid/DataList动态ToolTip
- Ajax实现DataGrid/DataList动态ToolTip
- CSS选择符及优先级计算
- Lowmemorykiller笔记
- byte[]和InputStream的相互转换
- Android ADB命令大全(通过ADB命令查看wifi密码、MAC地址、设备信息、操作文件、查看文件、日志信息、卸载、启动和安装APK等)
- 下载
- 基于1.3.3版本tooltip的datagrid单元格tip实现
- Cocos2d-JS 创建node节点示例
- poj 2987 Firing 【最大权闭合图 输出点数和最大权值】
- 关于C++引用的一些注意点
- Android 控件之七:Spinner 下拉列表
- 通知客户端不要缓存
- 说我装13?过来,打屎你!(揭秘程序员装13面具)
- TextView的API 中文文档
- IOS 多线程编程指南:1介绍