首頁  >  文章  >  後端開發  >  javascript - easyui1.5 datagrid中分頁顯示不正常,求教各位

javascript - easyui1.5 datagrid中分頁顯示不正常,求教各位

WBOY
WBOY原創
2016-10-11 14:23:131167瀏覽

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>

求求各位大神如果有同樣問題,救救小弟,謝謝

回覆內容:

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>

求求各位大神如果有同樣問題,救救小弟,謝謝

1.你就用js數組來寫吧,就沒問題了。
2.原來也遇到過不少初次不正常只要改變窗口就顯示正常的情況,原因我猜測是這樣的:easyui初次會獲取窗體高度,然後把頁面渲染上去,然而你把toolbar寫在下面之後他認為沒有那段高度自然等toolbar顯示出來了則分頁就會下去一部分。可以加上height屬性試試看

<code>            height : $('#**').height()-**,
            pagination : true,
</code>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn