A small improvement on the easyui datagrid component

# A small improvement on the easyui datagrid component # when using the datagrid in an actual project, the layout is restricted. Sometimes the table cannot be too large, and the content in the table cannot be completely displayed at this time, you need to drag and adjust the column width frequently to see the complete information! [Insufficient length] ( http://images.cnitblog.com/blog/84053/201402/091301407734130.jpg ) ## Planning and thinking about the datagrid API, there are several points worth thinking about * 'fitcolumns 'attributes, ** True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling **. This attribute is useful only when the datagrid width is sufficient. * 'Nowre' attribute, ** True to display data in one line **. This attribute is useful only when the height of the datagrid is sufficient. * 'Onafterrender' event, ** Fires after the view is rendered ** event can be processed after table rendering is complete, combined with the 'title' attribute in HTML, it can be used to set mouse prompts. # Write the code with a mouse prompt in the correct direction. But where should I place the prompt? Here we need to analyze the HTML after the datagrid is rendered! [Generated HTML] ( http://images.cnitblog.com/blog/84053/201402/091309482037806.jpg ) You can see that the table content is in the div element of the class 'datagrid-cell ', so you need to write code to add the title attribute at the beginning, I am directly modifying the '''javascript $ OF THE 'onafterrender' event. 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 () ;}}''' later, it was found that some datagrid with onAfterRender events will overwrite the original events, so after some code details adjustments, '''javascriptvar o RiFunc = $. 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 () ;}}''' ## solution effect! [Add a mouse prompt] ( http://images.cnitblog.com/blog/84053/201402/091301554347141.jpg ) This is an improvement in user experience # complete example and code [DEMO] ( http://p2227.github.io/demo/datagrid/ ) [Code (Summary of jquery/easyui functions commonly used in projects)] ( http://www.cnblogs.com/p2227/p/3541143.html )