easyUI 前端框架 table右侧留白 处理以及表格自适应屏幕

html：

 <div class="easyui-navpanel" style="width:100%;">
        <table id="change-list" style="height:100%;width: 100%;" >
             <thead id="c-thead"></thead>
         </table>
 </div>

 

一、表格自适应屏幕

   1.js生成表头

function generateThead() {
   // 部门变动
   var  columns = [[
        { field: 'rowNo', title: '编号', align: 'center', width: fixWidth(0.1) },
        { field: 'username', title: '姓名', align: 'center', width: fixWidth(0.15) },
        { field: 'oldDep', title: '原部门', align: 'center', width: fixWidth(0.25) },
        { field: 'newDep', title: '现部门', align: 'center', width: fixWidth(0.25) },
        { field: 'changeDate', title: '变动日期', align: 'center', width: fixWidth(0.25) 
   }]];
    return columns;
}


/**
 * easyui Datagrid百分比显示宽度
 */
function fixWidth(percent) {
    return document.body.clientWidth * percent;//根据自身情况更改
}

field:与数据库传过来的key要相同，可以通过这种方式将表头转换为中文

   var rows = generateThead();
    $('#change-list').datagrid({
        fit: true,  // 自动适应父容器大小
        fitColumns: true,//使列自动展开/收缩列的宽度以适应网格的宽度，防止水平滚动。
        scrollbarSize: 0,
        nowrap: false,
        animate: false,
        border: true,   //有边框
        striped: true, // 隔行变色特性S
        data: data,
        columns: rows,
      });
    }

注意：

field如果有重复的话，会导致fitColumns=”true”失效 
如果列都没有设置宽度的话，也会导致fitColumns=”true”失效 

二.table右侧留白处理方式

加入：

 fitColumns: true,
 scrollbarSize: 0

这两句。