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

最新推荐文章于 2019-06-19 20:40:21 发布

luffy5459

最新推荐文章于 2019-06-19 20:40:21 发布

阅读量4.1k

点赞数 4

分类专栏： Web前端文章标签： datagrid右侧空白 scrollbarSize:0 easyui-datagrid

本文链接：https://blog.csdn.net/feinifi/article/details/83818916

版权

Web前端专栏收录该内容

87 篇文章 3 订阅

订阅专栏

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:'frank@sina.com',mobile:'15011186303',status:'true'},
{id:'2',name:'jack',code:'1002',email:'jack@yeah.com',mobile:'15910909536',status:'true'},
{id:'3',name:'yy',code:'1003',email:'yy@163.com',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属性，表格宽度也是可以撑满的。

luffy5459

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
easyui datagrid列表右侧空白解决办法

easyui提供的datagrid控件，默认情况下，即使列表宽度设置成100%，右侧仍然会有一个空白，如下所示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"/&gt;&lt;link rel="stylesheet" type="text/css" href="
复制链接

扫一扫