这几天重新写一个新项目，准备使用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>

结果如下图所示

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

解决方案

将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>

到此问题解决，如下图