easyui datagrid列表右侧空白解决办法

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>&nbsp;&nbsp;"+
    "<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属性，表格宽度也是可以撑满的。

easyui datagrid列表右侧空白解决办法

猜你喜欢