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)})
posted @ 2012-08-27 00:52  horizon~~~  阅读(3325)  评论(0)    收藏  举报