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

##问题
在实际项目中使用datagrid时，受版面限制，有时候表格不能太大，这时候表格里面的内容就不能完全显示，用户需要经常拖动调整列宽才能看完整
![长度不足](http://image.bubuko.com/info/201402/20181007034958672151.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](http://image.bubuko.com/info/201402/20181007034959026657.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());
        })
    }
```

##解决效果
![增加鼠标提示](http://image.bubuko.com/info/201402/20181007034959584295.jpg)
这也算是用户体验的一点提高

##完整的示例及代码
[DEMO](http://p2227.github.io/demo/datagrid/)

[代码（项目常用jquery/easyui函数小结）](http://www.cnblogs.com/p2227/p/3541143.html)

$.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());
        })
    }

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());
        })
    }

对easyui datagrid组件的一个小改进

原文：http://www.cnblogs.com/p2227/p/3541387.html