Easyui设置列宽成百分比的问题

因为我们电脑的分辨率，所以不能把easyui的宽度写死，使用百分比，更好的兼容。

代码如下：

<!-- 表格 -->     <table id="dg"></table>     <script type="text/javascript">        //ajax请求json列表数据，填充到表格        $("#dg").datagrid({               url:'<%=path%>/app/cwmeeting/xml/conferee_xml.jsp',               scrollbarSize:0,//滚动条               singleSelect:true,               rownumbers : true,//显示带有行号的列               fitColumns : true,//会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚               queryParams : {//当请求远程数据时，发送的额外参数                   cwm_id:"<%=cwm_id%>",                   issue_id:"<%=id%>"               },               //fitColumns : true,//使列自动展开/折叠以适应数据网格（datagrid）的宽度               loadMsg : "请稍后,数据正在加载",//加载提示信息               columns : [ [                             {                                 width : fixWidth(0.2),                                 title : '姓名',                                 align:'center',                                 field : 'fsname',                                 sortable : true                             },                             {                                 width : fixWidth(0.2),                                 title : '单位',                                 align:'center',                                 field : 'fsdeptid',                                 sortable : true                             },                             {                                 width : fixWidth(0.2),                                 title : '联系电话',                                 align:'center',                                 field : 'fsmobile',                                 sortable : true                             },                             {                                 width : fixWidth(0.2),                                 title : '是否有签到权限',                                 align:'center',                                 field : 'issign',                                 sortable : true,                                 formatter:function(value,row,index){                                    var id=''+row.cp_id+'';                                    var value=value;                                    if(row.issign=="1"){                                        return '<a href="javascript:issign(\''+id+'\',\''+value+'\')"><font color="green" face="宋体" size="5">是</font></a>';                                    }else{                                        return '<a href="javascript:issign(\''+id+'\',\''+value+'\')"><font color="red" face="宋体" size="5">否</font></a>';                                    }                                 }                             },                             {                                 width : fixWidth(0.2),                                 title : '是否有表决权限',                                 align:'center',                                 field : 'isvote',                                 sortable : true,                                 formatter:function(value,row,index){                                    var id=''+row.cp_id+'';                                    if(row.isvote=="1"){                                         return '<a href="javascript:isvote(\''+id+'\',\''+value+'\')"><font color="green" face="宋体" size="5">是</font></a>';                                    }else{                                         return '<a href="javascript:isvote(\''+id+'\',\''+value+'\')"><font color="red" face="宋体" size="5">否</font></a>';                                    }                                 }                             },                             ]]});               //easyui表格高度        function fixHeight(percent){              return (document.body.clientHeight) * percent ;           }         //easyui表格宽度        function fixWidth(percent){              return (document.body.clientWidth - 5) * percent ;           } </script>

核心代码：

1、获取easyui的宽，高    //easyui表格高度        function fixHeight(percent){              return (document.body.clientHeight) * percent ;           }         //easyui表格宽度        function fixWidth(percent){              return (document.body.clientWidth - 5) * percent ;           } 2、然后调用即可                  {                     width : fixWidth(0.2),                                 title : '联系电话',                                 align:'center',                                 field : 'fsmobile',                                 sortable : true                             },

效果图如下：

 

注意事项：

1.scrollbarSize:0,//滚动条

  这个属性去掉垂直滚动条的，也就是右边的滚动条。

2.fitColumns : true,//会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚

  这个属性去水平方向的滚动条的，也就是下边的滚动条