easyui——datagrid（数据网格）对于浏览器窗口自适应的解决

需求：使页面中的datagrid加载后，datagrid的width（宽度）跟随浏览器窗口大小改变而改变，并自适应各种显示器

适配宽度的函数

//适配各种尺寸的显示器
function fixWidth(percent) {
	return document.body.clientWidth * percent;// 根据自身情况更改
}

我的datagrid声明

	$("#fileGrid").datagrid({
		url : '你的路径',
		queryParams : {
			"selfApplicationNumber" : selfApplicationNumber,
			"orderNumber" : orderNumber
		},
		width : '100%',
		fitColumns : true,
		striped : true,
		autoRowHeight : false,
		height : 600,
		nowrap : false,
		collapsible : true,
		singleSelect : false,
		remoteSort : false,
		idField : 'id',
		pageNumber : 1,
		pagination : true,
		rownumbers : true,
		toolbar : [{
					text : '删除',
					iconCls : 'icon-remove',
					handler : deleteData
				}],
		fit : true,
		idField : 'ID',
		columns : [[{
					field : 'ck',
					checkbox : true
				}, {
					field : 'ID',
					title : 'id',
					width : 100,
					align : 'center',
					hidden : true
				}, {
					field : 'baseOrgId',
					title : '所属组织id',
					width : 100,
					align : 'center',
					hidden : true

				}, {
					field : 'createPersonId',
					title : '创建人名字',
					width : fixWidth(0.1),
					align : 'center'
				}, {
					field : 'fileName',
					title : '文件名',
					width : fixWidth(0.24),
					align : 'center'
				}, {
					field : 'mappedFileName',
					title : '映射文件名',
					width : fixWidth(0.1),
					align : 'center',
					hidden : true
				}, {
					field : 'applicationNumber',
					title : '申请单号',
					width : fixWidth(0.14),
					align : 'center'
				}, {
					field : 'suffix',
					title : '后缀名',
					width : fixWidth(0.1),
					align : 'center',
					hidden : true
				},

				{
					field : 'orderNumber',
					title : '流程单号',
					width : fixWidth(0.14),
					align : 'center',
					formatter : function(value) {
						if (value != "null" && value != '' && value != null) {
							return value;
						} else {
							return '-';
						}
					}
				}, {
					field : 'fileType',
					title : '文件类型',
					width : fixWidth(0.1),
					align : 'center',// value:该字段的值;row:当前行的所有信息;index:当前行的编号（0，1，2，3....）;
					formatter : function(value, row, index) {
						var flag = (row.orderNumber == 'null' || row.orderNumber == null)
								? "申请单所属文件"
								: "流程单所属文件";
						return flag;
					}
				}, {
					field : 'createTime',
					title : '文件上传时间',
					width : fixWidth(0.1),
					align : 'center'/*
					 * , formatter : function(value) { var
					 * unixTimestamp = new Date(value); var
					 * result = unixTimestamp.toLocaleString();
					 * return result.substring(0, result.length -
					 * 11); return (value+0).toLocaleString(); }
					 */
				}, {
					field : 'opt',
					title : '操作',
					width : fixWidth(0.1),
					align : 'center',
					formatter : function(value, row, index) {
						var date = row.createTime;
						date = date.substring(0, 4) + date.substring(5, 7)
								+ date.substring(8, 10);
						/*
						 * return "<a
						 * href='你的路径'
						 * >下载</a>";
						 */return "<a href='你的路径' >下载</a>";
					}
				}]],
		onLoadError : function(obj) {
			$.messager.error('错误', obj.responseText);
		}
	});

1. datagrid中字段声明的width设置都用fixWidth（）函数来设置
2. 将参数fitColumns 设置为true，此参数设置为true，datagrid会自动调整列的宽度，但只是在第一次初始化datagrid的时候，所以我们能需要新建窗口事件函数来动态的修改列宽

窗口大小改变时的响应事件

//窗口大小改变时触发
$(window).resize(function() {
			/*fileDiv是fileGrid（datagrid：数据网格）的父块。
			 *	网页可见区域宽：document.body.clientWidth
			 *	网页可见区域高：document.body.clientHeight
			 *	网页可见区域宽：document.body.offsetWidth (包括边线的宽)
			 *	网页可见区域高：document.body.offsetHeight (包括边线的宽)
			 *	网页正文全文宽：document.body.scrollWidth
			 *	网页正文全文高：document.body.scrollHeight
			 *	网页被卷去的高：document.body.scrollTop
			 *	网页被卷去的左：document.body.scrollLeft
			 *	网页正文部分上：window.screenTop
			 *	网页正文部分左：window.screenLeft
			 *	屏幕分辨率的高：window.screen.height
			 *	屏幕分辨率的宽：window.screen.width
			 *	屏幕可用工作区高度：window.screen.availHeight
			 *	屏幕可用工作区宽度：window.screen.availWidth
			 */
			/*			$('#fileDiv').resizable({    
			 maxWidth:800,
			 maxHeight:600
			 });*/
			 //改变了datagrid所在的div的宽度大小
			$('#fileDiv').width(document.body.clientWidth);
			//调用fitCoulms函数会使datagrid重新请求一次后台，重新初始化datagrid，达到自适应窗口大的目的
			fitCoulms();

		})

function fitCoulms() {

	$('#fileGrid').datagrid({
		fitColumns : true
			/*,resizable :true*/
		})

}

#综上的实现方式能实现datagrid自适应浏览器窗口大小的需求，但是会再次请求后台，性能上有浪费！，希望各路大神能有其他好的实现方式！多多交流！