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

我不是女神ヾ 2022-04-18 02:18 325阅读 0赞

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:'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>

显示效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

据说，右侧的空白是留给scroll的，这里如果有一个滚动条，那么这部分看着就不那么显眼了，实际上，列表数据大多数都是分页显示的，不存在滚动条的情况。强迫症就受不了了，有一种从源码和样式上解决的根本办法，但是这一点不推荐。其实easyui在设计上考虑了这一点，如果不需要右侧的滚动条，而且需要表格宽度100%，那么可以通过一个属性：scrollbarSize:0来设置。如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][] 这样设置之后，就完美解决了datagrid右侧空白的问题，最终效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

该属性也可以通过在table标签上通过data-options="scrollbarSize:0"的方式设置，一样可以生效。另外，我试过不加fitcolumns:true属性，表格宽度也是可以撑满的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220418/c5b9e6a545bc41d1a6fec90d2dcbfaa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220418/f40e9b83b9ab41b093e9a6035997cd24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: /images/20220418/f299eaaef5c14aeab76a161cb1a31388.png