记easyui的一次大坑,边框显示不完整的问题!

这几天重新写一个新项目,准备使用easyui前端框架,但是在使用过程中发现使用纯js生成的datagrid的有边框显示不完整的问题,搞了好久,终于搞清楚了问题出现的原因。

问题描述

代码如下:

<table id="testTable"></table>
<script type="text/javascript">
        $('#testTable').datagrid({
            width:500,
            title:'Test',
            height:150,
            columns: [[
                {field: 'code', title: '代码', width: 100},
                {field: 'name', title: '名称', width: 100},
                {field: 'price', title: '价格', width: 100, align: 'right'}
            ]],
            data: [
                {code: 'value11', name: 'value12', price: '234'},
                {code: '234', name: '345', price: 'fgh'},
                {code: '234', name: '345', price: 'fgh'},
                {code: '234', name: '345', price: 'fgh'}
            ]
        });
</script>

结果如下图所示

e1hxmxdudo53tzprc

右边框被遮挡了,好坑……

解决方案

将easyui的代码写入页面加载完成的回调中即可,代码如下:

<table id="testTable"></table>
<script type="text/javascript">
    $(function () {//必须写在 $(function () { xxxx });方法中
        $('#testTable').datagrid({
            width:500,
            title:'Test',
            height:150,
            columns: [[
                {field: 'code', title: '代码', width: 100},
                {field: 'name', title: '名称', width: 100},
                {field: 'price', title: '价格', width: 100, align: 'right'}
            ]],
            data: [
                {code: 'value11', name: 'value12', price: '234'},
                {code: '234', name: '345', price: 'fgh'},
                {code: '234', name: '345', price: 'fgh'},
                {code: '234', name: '345', price: 'fgh'}
            ]
        });
    });
</script>

到此问题解决,如下图

us2u01bcx8gb2gsam21l

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕

验证码 *