easyui Datagrid添加ToolTips

1.首先添加 onLoadSuccess事件

data-options="onLoadSuccess:onLoadSuccess"

2. 表格中各个TD单元格添加mouseover事件

function onLoadSuccess(data) {
            var panel = $(‘#gvList‘).datagrid(‘getPanel‘).panel(‘panel‘);
            panel.find(".datagrid-view2").find(‘.datagrid-btable tr>td‘).mouseover(function(e) {
                var index = $(this).parent().attr("datagrid-row-index");
                var row = $(‘#gvList‘).datagrid(‘getRows‘)[index];
                var content = "消息接受者:<font color=‘red‘>" + row.called + "</font>";
                content += "<br>消息内容:<font color=‘red‘>" + row.content + "</font>";
                content += "<br>发送结果:<font color=‘red‘>" + row.send_result + "</font>";
                $(this).tooltip({ content: content, trackMouse: true }).tooltip(‘show‘);
            });
        }

时间: 2024-11-01 15:17:12

easyui Datagrid添加ToolTips的相关文章

easyui datagrid 添加 tooltip

步骤: 引入 tooltip 扩展文件,基于easyui1.3.3,参考这里: 设置 easyui 的 data-options 属性,增加事件 onLoadSuccess: 增加 onLoadSuccess 的处理方法,在 datagrid 数据加载完成后初始化 tooltip. 参考代码: ... 略 ... <script type="text/javascript" src="__MJS__/jquery.easyui.min.js"></

EasyUI datagrid添加右键菜单项

js代码 //动态加载数据表格 function InitData() { $('#grid').datagrid({ url: '/Home/Query?r=' + Math.random(), //数据接收URL地址 method: 'GET', iconCls: 'icon-view', //图标 fit: false, //自动适屏功能 nowrap: true, autoRowHeight: false, //自动行高 autoRowWidth: true, striped: true

easyui datagrid添加progressbar 进度条

{field:'shtgl',title:'审核通过率',width:90,formatter:progressFormatter} function progressFormatter(value,row,index){ htmlstr='<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'          +'<

Easy-UI 动态添加DataGrid的Toolbar按钮

在前人的基础上进行的修改,不知道他是从哪里引用来的,所以没有粘贴引用地址. 原代码不支持1.3.6. 修改功能: 1.如果之前没有添加过工具,用这个方法不能添加(已修复): 2.估计是不支持1.3.6,所以在1.3.6下不能删除按钮(已修复): 3.添加了在删除最有一个按钮后把按钮容器删除掉: 插件代码: $.extend($.fn.datagrid.methods, { addToolbarItem: function (jq, items) { return jq.each(function

easyui datagrid 每条数据后添加操作按钮

easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" data-options="singleSelect:true,collapsible:true,url:'publish.json',method:'get',fit:true" style="width: 700px; height: 250px"> &l

[转载]EasyUI中数据表格DataGrid添加排序功能

我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前页的数据进行排序,不是我们想要用效果. 下面开始演示从服务器端排序功能. 第一步,启用EasyUI DataGrid的排序功能: 具体就是为列设置sortable属性,如下: { field: "SOID", title: "订单单号", width: "80

如何给easyui datagrid toolbar上方添加搜索框

最近在使用easyui编写后台框架时,遇到一个头疼的问题,就是给datagrid添加一个搜索框,蛋疼的是官方貌似没有提供相关的方法(有可能是我不知道,如果哪位大神知道,希望能告知). 百度了很久,搜索到一篇博文,是通过prependTo到.datagrid-toolbar的方式,这样子确实是可行的.楼主使用的是tab,在每个tab上面都有一个datagrid,由于楼主是使用js动态添加节点,所以面临了一个问题,就是easyui给所有datagrid的toolbar生成的dom的class(好绕:

为easyUI的dataGrid添加自己的查询框

dataGrid作为easyUI的一个核心组件,其功能上是很强大的. 但是外观上似乎就有点差强人意了,首先说一下我对dataGrid外观的2点感受 1.图标不好看,且尺寸很小(16x16)-- 关于这个,可以点这里看另一篇blog解决 2.高度问题,如果分页只有8-10条的话,且toolbar只放16x16的图标,那么整个高度只有差不多300px最多 这次的改写主要也就是解决这么两个问题 下面主要是为dataGrid添加一个多条件的查询框,先看一下最终的效果: 图1 图2 做点简单的介绍: 这里

使用EasyUI实现添加和删除功能

        增删该查是任何一个项目都少不了的功能操作,这篇博文主要简介一下如何使用EasyUI实现添加和删除功能.         首先,导入EasyUI的js代码: <link href="~/EasyuiSource/themes/default/easyui.css" rel="stylesheet" /> <link href="~/EasyuiSource/themes/icon.css" rel="st