javascript - easyui1.5 datagrid中分页显示不正常，求教各位-php教程-PHP中文网

javascript - easyui1.5 datagrid中分页显示不正常，求教各位

WBOY

发布： 2016-10-11 14:23:13

原创

1201 人浏览过

1、问题描述：在使用easyui1.5时，发现datagrid中如果使用toolbar,会导致datagrid中的分页控件显示不正常！向下走了几px,如图所示： javascript - easyui1.5 datagrid中分页显示不正常，求教各位

2、调试后的发现(2点)：
一、datagrid的toolbar有2中实现方法， javascript - easyui1.5 datagrid中分页显示不正常，求教各位
并非2种实现都是出现以上问题，只有使用

这种实现才会出现问题，而使用js数组是一切正常显示的
二、只有调整下浏览器窗口大小（缩小一点或者放大一点），分页显示马上正常，ps:我觉得是不是初始化的时候高度没有计算准确~~

3、问题代码：

<code> <script>
     $(function(){
        $('#category').datagrid({
            url: '{:U("Category/getList")}',
            border: false,
            toolbar: '#tbar',
            fit: true,

            columns:[[
                {field:'id',checkbox:true},
                {field:'sort',title:'排序',width:100},
                {field:'name',title:'栏目名称',width:100},
                {field:'create_time',title:'创建时间',width:100},
            ]],
            pagination: true,

            fitColumns: true,
            rownumbers: true,
            data: [
                {
                    "id": 1,
                    "sort": 1,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                },
                {
                    "id": 2,
                    "sort": 2,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                }
            ]
        });
    });
</script>

<table id="category"></table>
<div id="tbar" style="padding: 5px;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</code>

登录后复制

求求各位大神如果有同样问题，救救小弟，谢谢

回复内容：

3、问题代码：

<code> <script>
     $(function(){
        $('#category').datagrid({
            url: '{:U("Category/getList")}',
            border: false,
            toolbar: '#tbar',
            fit: true,

            columns:[[
                {field:'id',checkbox:true},
                {field:'sort',title:'排序',width:100},
                {field:'name',title:'栏目名称',width:100},
                {field:'create_time',title:'创建时间',width:100},
            ]],
            pagination: true,

            fitColumns: true,
            rownumbers: true,
            data: [
                {
                    "id": 1,
                    "sort": 1,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                },
                {
                    "id": 2,
                    "sort": 2,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                }
            ]
        });
    });
</script>

<table id="category"></table>
<div id="tbar" style="padding: 5px;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</code>

登录后复制

求求各位大神如果有同样问题，救救小弟，谢谢

1.你就用js数组来写吧，就没问题了。
2.原来也遇到过不少初次不正常只要改变窗口就显示正常的情况，原因我猜测是这样的：easyui初次会获取窗体高度，然后把页面渲染上去，然而你把toolbar写在下面之后他认为没有那段高度自然等toolbar显示出来了则分页就会下去一部分。可以加上height属性试试看

<code>            height : $('#**').height()-**,
            pagination : true,
</code>

登录后复制