Heim > Backend-Entwicklung > PHP-Tutorial > javascript - Die Paginierungsanzeige im easyui1.5-Datagrid ist nicht normal.

javascript - Die Paginierungsanzeige im easyui1.5-Datagrid ist nicht normal.

WBOY
Freigeben: 2016-10-11 14:23:13
Original
1181 Leute haben es durchsucht

1. Problembeschreibung: Bei der Verwendung von easyui1.5 habe ich festgestellt, dass die Paging-Steuerung im Datagrid nicht richtig angezeigt wird, wenn die Symbolleiste im Datagrid verwendet wird! Gehen Sie ein paar Pixel nach unten, wie im Bild gezeigt: javascript - Die Paginierungsanzeige im easyui1.5-Datagrid ist nicht normal.

2. Ergebnisse nach dem Debuggen (2 Punkte):
Es gibt 2 Implementierungsmethoden für die Datagrid-Symbolleiste. javascript - Die Paginierungsanzeige im easyui1.5-Datagrid ist nicht normal.
Nur ​​bei Verwendung von

Die Implementierung wird Probleme verursachen, aber die Verwendung von js-Arrays wird alles normal anzeigen
2. Solange Sie die Größe des Browserfensters anpassen (etwas verkleinern oder etwas vergrößern), wird die Paging-Anzeige sofort normal sein. PS: Ich glaube, die Höhe wurde zu diesem Zeitpunkt nicht genau berechnet~~

3. Fragecode:

<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>
Nach dem Login kopieren
Nach dem Login kopieren

Bitte helfen Sie mir, wenn Sie das gleiche Problem haben, danke

Antwortinhalt:

1. Problembeschreibung: Bei der Verwendung von easyui1.5 habe ich festgestellt, dass die Paging-Steuerung im Datagrid nicht richtig angezeigt wird, wenn die Symbolleiste im Datagrid verwendet wird! Gehen Sie ein paar Pixel nach unten, wie im Bild gezeigt: javascript - Die Paginierungsanzeige im easyui1.5-Datagrid ist nicht normal.

2. Ergebnisse nach dem Debuggen (2 Punkte):
Es gibt 2 Implementierungsmethoden für die Datagrid-Symbolleiste. javascript - Die Paginierungsanzeige im easyui1.5-Datagrid ist nicht normal.
Nur ​​bei Verwendung von

Die Implementierung wird Probleme verursachen, aber die Verwendung von js-Arrays wird alles normal anzeigen
2. Solange Sie die Größe des Browserfensters anpassen (etwas verkleinern oder etwas vergrößern), wird die Paging-Anzeige sofort normal sein. PS: Ich glaube, die Höhe wurde zu diesem Zeitpunkt nicht genau berechnet~~

3. Fragecode:

<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>
Nach dem Login kopieren
Nach dem Login kopieren

Bitte helfen Sie mir, wenn Sie das gleiche Problem haben, danke

1. Verwenden Sie einfach das js-Array, um es zu schreiben, und es wird kein Problem geben.
2. Ich bin auf viele Situationen gestoßen, in denen die Anzeige normal ist, solange das Fenster geändert wird, was beim ersten Mal nicht normal ist: Easyui erhält zum ersten Mal die Höhe des Formulars Zeit, und rendern Sie dann die Seite, aber wenn Sie die Symbolleiste schreiben, dachte er im Folgenden, dass ohne diese Höhe die Seite beim Anzeigen der Symbolleiste natürlich um einen Teil nach unten geht. Sie können versuchen, das Höhenattribut

hinzuzufügen
<code>            height : $('#**').height()-**,
            pagination : true,
</code>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage