版权声明:欢迎转载 https://blog.csdn.net/feinifi/article/details/83818916
easyui提供的datagrid控件,默认情况下,即使列表宽度设置成100%,右侧仍然会有一个空白,如下所示:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<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/demo.css"/>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div class="easyui-container-fluid">
<div class="easyui-panel" style="width:100%;border:none;" data-options="title:'用户列表'">
<div class="table-wrapper">
<table class="easyui-datagrid" id="datagrid" style="width:100%;">
<thead>
<th data-options="field:'id',align:'center',width:'14%'">ID</th>
<th data-options="field:'name',align:'center',width:'14%'">Name</th>
<th data-options="field:'code',align:'center',width:'14%'">Code</th>
<th data-options="field:'email',align:'center',width:'14%'">Email</th>
<th data-options="field:'status',align:'center',width:'14%'">Status</th>
<th data-options="field:'mobile',align:'center',width:'14%'">Mobile</th>
<th data-options="field:'action',align:'center',formatter:actions,width:'16%'">
Action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function actions(val,row,index){
return "<a class='easyui-linkbutton l-btn l-btn-small' href='javascript:void(0);'
style='width:60px;' onclick='update(\""+row.id+"\")'>修改</a> "+
"<a class='easyui-linkbutton l-btn l-btn-small' href='javascript:void(0);'
style='width:60px;' onclick='disableOne(\""+row.id+"\")'>删除</a>";
}
function update(id){
console.log("update"+id);
}
function disableOne(id){
console.log("disableOne:"+id);
}
$(function(){
$("#datagrid").datagrid({
data:
[{id:'1',name:'frank',code:'1001',email:'[email protected]',mobile:'15011186303',status:'true'},
{id:'2',name:'jack',code:'1002',email:'[email protected]',mobile:'15910909536',status:'true'},
{id:'3',name:'yy',code:'1003',email:'[email protected]',mobile:'15026418738',status:'false'}
],
toolbar:[{
iconCls:"icon-add",
text:'添加用户',
handler:function(){
console.log("ready to redirect add page.");
}
}],
//scrollbarSize:0
});
});
</script>
</body>
</html>
显示效果:
据说,右侧的空白是留给scroll的,这里如果有一个滚动条,那么这部分看着就不那么显眼了,实际上,列表数据大多数都是分页显示的,不存在滚动条的情况。强迫症就受不了了,有一种从源码和样式上解决的根本办法,但是这一点不推荐。其实easyui在设计上考虑了这一点,如果不需要右侧的滚动条,而且需要表格宽度100%,那么可以通过一个属性:scrollbarSize:0来设置。如下所示:
这样设置之后,就完美解决了datagrid右侧空白的问题,最终效果如下:
该属性也可以通过在table标签上通过data-options="scrollbarSize:0"的方式设置,一样可以生效。另外,我试过不加fitcolumns:true属性,表格宽度也是可以撑满的。