對easyui datagrid組件的一個小改進

#對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了  可以看到表格的內容是在類名為`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()); }) } ``` ##解決效果  這也算是用戶體驗的一點提高 ##完整的示例及代碼 [DEMO](http://p2227.github.io/demo/datagrid/) [代碼（項目常用jquery/easyui函數小結）](http://www.cnblogs.com/p2227/p/3541143.html)