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

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:

2. Ergebnisse nach dem Debuggen (2 Punkte):
Es gibt 2 Implementierungsmethoden für die Datagrid-Symbolleiste.
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>

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:

2. Ergebnisse nach dem Debuggen (2 Punkte):
Es gibt 2 Implementierungsmethoden für die Datagrid-Symbolleiste.
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>

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>

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7400

15

Java-Tutorial

1630

14

CakePHP-Tutorial

1358

52

Laravel-Tutorial

1268

25

PHP-Tutorial

1217

29

Mehr anzeigen