easyui datagrid 浏览器像素及改变表、列宽问题
生活随笔
收集整理的這篇文章主要介紹了
easyui datagrid 浏览器像素及改变表、列宽问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉載以下文章時我還沒有很深的研究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)})總結
以上是生活随笔為你收集整理的easyui datagrid 浏览器像素及改变表、列宽问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ogre wiki 中级教程1 动画，点
- 下一篇： _Blank主页——个人浏览器主页定制