#对easyui datagrid组件的一个小改进

##问题
在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整
![长度不足](https://images0.cnblogs.com/blog/84053/201402/091301407734130.jpg) ##规划与思考
一览datagrid的API,有几点值得思考 * `fitColumns`属性,**True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling** ,这个属性是在datagrid本身的宽度足够的情况下才好用。
* `nowrap`属性,**True to display data in one line**,这个属性是在datagrid本身的高度足够的情况下才好用。
* `onAfterRender`事件,**Fires after the view is rendered**这个事件可以在表格渲染完成后再处理一些事情,再结合HTML中的`title` 属性,可以用来进行鼠标提示的设置。 ##代码的编写
确定方向是鼠标提示,可是提示放在哪里呢,这里就需要分析datagrid渲染完成后的HTML了 ![生成的HTML](https://images0.cnblogs.com/blog/84053/201402/091309482037806.jpg) 可以看到表格的内容是在类名为`datagrid-cell`的div元素里面的,所以要写代码在这里增加title属性 刚开始的时候,我是直接修改`onAfterRender `事件的
```javascript
$.fn.datagrid.defaults.view.onAfterRender = function(tgt){
$(tgt).datagrid("getPanel").find("div.datagrid-body").find("div.datagrid-cell").each(function(){
var $Obj = $(this)
$Obj.attr("title",$Obj.text());
})
}
```
后来发现对于有些已经有onAfterRender 事件的datagrid,会覆盖其原来的事件,所以经过一些代码细节的调整,变成这样 ```javascript
var oriFunc = $.fn.datagrid.defaults.view.onAfterRender;
$.fn.datagrid.defaults.view.onAfterRender = function(tgt){
oriFunc(tgt);
$(tgt).datagrid("getPanel").find("div.datagrid-body").find("div.datagrid-cell").each(function(){
var $Obj = $(this)
$Obj.attr("title",$Obj.text());
})
}
``` ##解决效果
![增加鼠标提示](https://images0.cnblogs.com/blog/84053/201402/091301554347141.jpg)
这也算是用户体验的一点提高 ##完整的示例及代码
[DEMO](http://p2227.github.io/demo/datagrid/) [代码(项目常用jquery/easyui函数小结)](http://www.cnblogs.com/p2227/p/3541143.html)

对easyui datagrid组件的一个小改进的更多相关文章

  1. easyUI datagrid组件能否有display:none的隐藏效果

    这个项目用了JQ easyUI datagrid 组件,我今天做了一个页面,页面有个div层,div里放了一个easyUI datagrid,页面初始化时div隐藏(display:none),通过点 ...

  2. jQuery EasyUI Datagrid组件的完整的基础DOM结构

    标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...

  3. jQuery EasyUI Datagrid组件默认视图分析

    在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...

  4. EasyUI datagrid组件绑定有转义字符的json数据出错

    最近项目中一个页面的datagrid出现了莫名其妙的问题, 首先是分页数据的第二页和第三页不能展示,过了一天后第一页也出不来了, 默认首页不出来导致后续分页处理无法进行, 整个数据都不出来了,最后只能 ...

  5. 使用DriverManager获取数据库连接的一个小改进

    由于使用DriverManager获取数据库连接时,由于DriverManager实现类中有一段静态代码块,可以直接注册驱动,且可以同时管理多个驱动程序 所以当换数据库连接时需要指定不同的数据库,那么 ...

  6. easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法

    easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...

  7. easyui datagrid 表格组件列属性formatter和styler使用方法

    明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构 ...

  8. easyui的datagrid组件,如何设置点击某行不会高亮该行的方式

    easyui的datagrid组件,有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式,有好几种方法可以实现,我举几个,可以根据你具体需求灵活应用: 1.修改easyui的css将高 ...

  9. EasyUI - DataGrid 组建 - [ 组件加载和分页 ]

    效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...

随机推荐

  1. rsyslog 直接读取日志,当日志截断后,不会继续发送

    rsyslog web机器上日志被截断,那么就不会发送到rsyslog服务器 因为imfile记录了offset,然后你直接>导致offset还没到

  2. ajax请求网络api

    不啰嗦,直接上代码: 1.在浏览器输入网址:http://api.asilu.com/weather/?callback=getname&city=深圳 你会看到如下结果:他返回的是json数 ...

  3. VBA在WORD应用中如何确定文本是否被选定

    确定文本是否被选定Selection 对象的 Type 属性返回所选内容类型的信息.如果所选内容为插入点,则下列示例显示一条消息. Sub IsTextSelected()    If Selecti ...

  4. css学习_css精灵技术、字体图标

    1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用 案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用im ...

  5. odoo 装饰器用法@api

    摘自:blog.csdn.net/cmzhuang/article/details/52932883 @api.one one装饰符自动遍历记录集,把self重新定义成当前记录.注意,返回值是一个li ...

  6. iOS之WKWebView加载的网页自适应大小

    一,前言 有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢? 以下代码可以适配大小(原本不可以 ...

  7. HIHOcoder 1441 后缀自动机一·基本概念

    思路 SAM的概念题 暴力模拟就好了 代码 #include <cstdio> #include <cstring> #include <algorithm> #i ...

  8. WebDriver基本操作入门及UI自动化练手页面

    在这里集中了我们在做UI自动化时常见的一些控件操作.希望能对新手有帮助. 下载地址:http://files.cnblogs.com/zhangfei/demo.rar package com.tes ...

  9. zookeeper 安装的三种模式

    Zookeeper安装 zookeeper的安装分为三种模式:单机模式.集群模式和伪集群模式. 单机模式 首先,从Apache官网下载一个Zookeeper稳定版本,本次教程采用的是zookeeper ...

  10. CMake 基本用法--写CMakeList.txt

    http://techbase.kde.org/Development/Tutorials/CMake_(zh_CN) http://www.cmake.org/Wiki/CMake 这一章将从软件开 ...