对easyui datagrid组件的一个小改进

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

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

##解决效果
![增加鼠标提示](//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组件的一个小改进

问题

在实际项目中使用datagrid时，受版面限制，有时候表格不能太大，这时候表格里面的内容就不能完全显示，用户需要经常拖动调整列宽才能看完整长度不足

规划与思考

一览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

可以看到表格的内容是在类名为datagrid-cell的div元素里面的，所以要写代码在这里增加title属性

刚开始的时候，我是直接修改onAfterRender事件的

$.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，会覆盖其原来的事件，所以经过一些代码细节的调整，变成这样

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