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.scrollbarSize:0,//滚动条

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_38555490/article/details/89242229