easyui的单元格提示窗体  鼠标悬浮事件

function findAllPreven() {
var infoname = $('#area').val();
areadatagrid=$('#dg').datagrid({
rowStyler : function(index, row) {
if (row.state == "0") {
return 'color:red';
} else if (row.state == "1") {
return 'color:green';
}
},
url : '连接地址',
fit : true,
nowrap : true,
fitColumns : true,
idField : 'id',
pagination : true,
pageSize : 15,
pageList : [ 15, 25, 35, 45 ],
rownumbers : true,
sortName : 'id',
sortOrder : "desc",
toolbar: '#tb',
checkOnSelect : true,
ctrlSelect:true,
remoteSort : false,
title:"数据列表",
queryParams : {
area : infoname,
},
columns : [ [ {
field : 'id',
title : '选择',
width : 100,
align : 'center',
sortable : true,
checkbox : true, }
,{
field : 'source',
title : '信息来源',
width : 100,
align : 'center',
sortable : true,
formatter:cellRowMark //悬浮
}
{
field : 'state',
title : '状态',
width : 100,
align : 'center',
sortable : true,
formatter:function(value,row,index){
if(value==0){
return "<span style='color:red'>未处理</span>";
}else if(value==1){
return "<span style='color:green'>已处理</span>";
}
else if(value==2){
return "<span style='color:black'>初处理</span>";
}
}
}
] ],
onLoadSuccess:function(){createTooltip();}, //初始化悬浮方法
onDblClickCell:function(rowIndex, field, value){
if(field=="source")
{
if(value=="")return; }
else
{
var rowData=$('#dg').datagrid('getRows')[rowIndex];
}
}
});
}
//单元格
function cellRowMark(value,row,index){
return '<span getInfo='+index+' class="easyui-tooltip">' + value + '</span>';
}
//创建悬浮方法
function createTooltip(){
$('#dataGrid【表格名称】').datagrid('getPanel').find('.easyui-tooltip').each(function(){
var index = parseInt($(this).attr('getInfo'));
$(this).tooltip({
content: $('<div>双击该单元格显示人员信息<br/>双击其他单元格显示预警信息</div>'),
position:'right'
});
});
}

easyui datagrid 悬浮事件的更多相关文章

  1. JQuery easyui Datagrid 分页事件

    easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...

  2. EasyUI DataGrid组织事件冒泡

    在事件内部需要阻止的地方添加如下代码 ]; 解释: arguments.callee是获得我自定义的事件处理方法OnSelected的方法体. .caller是获得调用OnSelected的上层方法( ...

  3. EasyUI datagrid 过滤事件段

    //dateTimeRange过滤扩展 $.extend($.fn.datagrid.defaults.filters, { dateRange: { /*onInit: function(targe ...

  4. EasyUi datagrid 单选框选中事件

    Easyui datagrid中的单选框默认是这样定义的 columns: [[ { field: 'CK', title: '', checkbox: true, width: 30 }]]. 平常 ...

  5. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

  6. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  7. EasyUI中datagrid双击事件

    EasyUI中datagrid双击事件 在jsp文件底部增加代码: <script type="text/javascript"> //数据表双击事件 $('#tabl ...

  8. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  9. easyui datagrid editor checkbox 单击事件

    Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...

随机推荐

  1. 分别用ToolBar和自定义导航栏实现沉浸式状态栏

    一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...

  2. UITableView点击每个Cell,Cell的子内容的收放

    关于点击TableviewCell的子内容收放问题,拿到它的第一个思路就是, 方法一: 运用UITableview本身的代理来处理相应的展开收起: 1.代理:- (void)tableView:(UI ...

  3. 做JavaWeb开发不知Java集合类不如归家种地

    Java作为面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储.但是使用数组存储对象方面具有一些弊端,而Java 集合就像一种容器,可以动态地把多个对象的引用放入容 ...

  4. Linq表达式和Lambda表达式用法对比

    什么是Linq表达式?什么是Lambda表达式?前一段时间用到这个只是,在网上也没找到比较简单明了的方法,今天就整理了一下相关知识,有空了再仔细研究研究 public Program() { List ...

  5. MapReduce工作流多种实现方式

    学习 hadoop,必不可少的就是编写 MapReduce 程序.当然,对于简单的分析程序,我们只需一个 MapReduce 任务就能搞定,然而对于比较复杂的分析程序,我们可能需要多个Job或者多个M ...

  6. 版本控制-svn服务器搭建和常用命令(centos 6.3)

    Svn是比较优秀的版本控制工具,虽然功能和性能上无法和Git媲美,但由于其容易搭建和使用的特性,所以在各个小公司还是很受欢迎的.使用Git可参考<版本控制-Git服务器搭建和常用命令使用> ...

  7. Elasticsearch 调优 (官方文档How To)

    How To Elasticsearch默认是提供了一个非常简单的即开即用体验.用户无需修改什么配置就可以直接使用全文检索.结果高亮.聚合.索引功能. 但是想在项目中使用高性能的Elasticsear ...

  8. Ural 1225. Flags 斐波那契DP

    1225. Flags Time limit: 1.0 secondMemory limit: 64 MB On the Day of the Flag of Russia a shop-owner ...

  9. C++ 运算符重载时,将运算符两边对象交换问题.

    在C++进行运算符重载时, 一般来讲,运算符两边的对象的顺序是不能交换的. 比如下面的例子: #include <iostream> using namespace std; class ...

  10. [LeetCode] Combinations 组合项

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...