轉載以下文章時我還沒有很深的研究easyui，現在回過頭來看看，有點弱，如今easyui的1.3.1版本都出來了，下面的東西可以使用“fit:true”屬性來解決
===========================分隔符=======================================================
轉自：http://blog.csdn.net/tnjun123456/article/details/7206409
easyui datagrid表格寬度，以及列寬隨瀏覽器縮放改變：
在使用easyui的datagrid時，需要考慮到瀏覽器不同的像素問題，所以，在使用時，我們需要自己寫一個函數：
function getWidth(percent){ return $(window).width() * percent; }
這樣在初始化時：
$("#tt").datagrid({
width: getWidth(0.6)
});
當然，有時候我們會考慮瀏覽器縮放，也要改變其中顯示，這時，加上一個resize事件就可以了：
$(window).resize(function(){ //alert("change...."); $("#tt").datagrid({ width: getWidth(0.6) }); //這樣resize也行 $("#tt").datagrid("resize",{width:getWidth(0.6)}); });
甚至，我們需要考慮到列寬也需要改變（因情況，條件而定，這里舉一例），我們需要在寫一個函數：（個人感覺這是重點因為如果設百分寬的話，只能用table--th了）
function fixWidthTable(percent){ return getWidth(0.6) * percent; }
完整的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DataGrid ContextMenu - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function fixWidthTable(percent){
return getWidth(0.6) * percent;
}
function getWidth(percent){
return $(window).width() * percent;
}
$(function(){
$(window).resize(function(){
//alert("change....");
$("#tt").datagrid({
width: getWidth(0.6)
});
});
$('#tt').datagrid({
url: 'datagrid_data2.json',
title: 'DataGrid - ContextMenu',
width: getWidth(0.6),
height: 'auto',
fitColumns: true,
columns:[[
{field:'itemid',title:'Item ID',width:fixWidthTable(0.12)},
{field:'productid',title:'Product ID',width:fixWidthTable(0.15)},
{field:'listprice',title:'List Price',width:fixWidthTable(0.12),align:'right'},
{field:'unitcost',title:'Unit Cost',width:fixWidthTable(0.12),align:'right'},
{field:'attr1',title:'Attribute',width:fixWidthTable(0.38)},
{field:'status',title:'Status',width:fixWidthTable(0.11),align:'center'}
]],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!$('#tmenu').length){
createColumnMenu();
}
$('#tmenu').menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
function createColumnMenu(){
var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
var fields = $('#tt').datagrid('getColumnFields');
for(var i=0; i<fields.length; i++){
$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
}
tmenu.menu({
onClick: function(item){
if (item.iconCls=='icon-ok'){
$('#tt').datagrid('hideColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#tt').datagrid('showColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
}
</script>
</head>
<body>
<h2>DataGrid - ContextMenu</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Right click the header of datagrid to show context menu.</div>
</div>
<table id="tt"></table>
</body>
</html>
上面的窗口大小改變事件中用的是重新加載，這樣速度會慢很多，而API中提供了resize方法，所以改為：
$("#tt").datagrid("resize",{width:getWidth(0.6)})