#对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,会覆盖其原来的事件,所以经过一些代码细节的调整,变成这样```javascriptvar 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)