JQuery Easy UI —— 如何让DataGrid自适应页面宽度
我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化，目前我还没发现其自带此功能，因此简单写了一个实现方法，与网友们分享，也希望能够帮助有需要的朋友。
下面是我基于JQuery做的一个实现：
/** * JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。 */$.fn.extend({/** * 修改DataGrid对象的默认大小，以适应页面宽度。 * * @param heightMargin * 高度对页内边距的距离。 * @param widthMargin * 宽度对页内边距的距离。 * @param minHeight * 最小高度。 * @param minWidth * 最小宽度。 * */resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {var height = $(document.body).height() - heightMargin;var width = $(document.body).width() - widthMargin;height = height < minHeight ? minHeight : height;width = width < minWidth ? minWidth : width;$(this).datagrid('resize', {height : height,width : width});}});$(function() { var datagridId = 'userDataGrid'; // 其他代码 // 第一次加载时自动变化大小 $('#' + datagridId).resizeDataGrid(20, 20, 300, 600); // 当窗口大小发生变化时，调整DataGrid的大小 $(window).resize(function() { $('#' + datagridId).resizeDataGrid(20, 20, 300, 600); });});