Laui exportiert alle Daten in der Tabelle

layui (homophon: UI-like) ist ein Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde. Es folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS. Der Schwellenwert ist extrem niedrig und kann verwendet werden der Box.

Die mit Laui gelieferte Exporttabelle kann nur die aktuelle Seite exportieren. Wenn die aktuelle Seite alle Daten enthält, bedeutet dies, dass alle Daten exportiert werden Beim Exportereignis wird eine separate Anforderung definiert. Wenn Daten im Hintergrund abgefragt werden, werden nicht die empfangenen Seiten und das Limit abgefragt, sondern alle werden abgefragt, wodurch der Export aller Daten realisiert wird.

Seitencode:

<!--导出按钮 或其他触发事件-->
<button class="export">导出报表</button>

<!--导出表 不展示-->
<div style="display: none;">
    <table id="data_export">
    </table>
</div>

layui.use(['form', 'table', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer；
        //导出表格
        var ins1 = table.render({
            elem: '#data_export',
            url: "url", //数据接口
            method: 'post',
            title: '导出表的表名',
            where: {
                mycode: "all"
            },
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名称'},
            ]],
            done: function (res, curr, count) {
                exportData = res.data;
            }
        });
        //导出按钮
        $(".export").click(function () {
            table.exportFile(ins1.config.id, exportData, 'xls');
        });
    })

Hintergrundverarbeitung:

if ($mycode) {    $data = M('mysql')->where($where)->select();  
    echo json_encode(['code' => 0, 'msg' => "", 'data' => $data]);                     
}

Optimierung: Der entsprechende Code ist der zweite js-Code oben:

//导出改为单独的事件，每次点击导出才会执行
    $(".export").click(function(){
        var ins1=table.render({
            elem: '#data_export',
            url: "url", //数据接口
            method: 'post',
            title: '表名',
            where: {
                mycode: "all"
            },
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名字'},
            ]],
            done: function (res, curr, count) {
                exportData=res.data;
                table.exportFile(ins1.config.id,exportData, 'xls');
            }
        });
    })

ist eigentlich die Tabelle. exportFile(ins1.config.id,exportData, 'xls'); wird in done platziert. Obwohl es anscheinend nicht viele Änderungen gibt, hat sich das Wesentliche geändert. Die vorherige Methode bestand darin, die ausgeblendete Exporttabelle zu laden.

Jetzt wird die ausgeblendete Exporttabelle nur gerendert, wenn auf „Exportieren“ geklickt wird. Wenn die Exporttabelle viel Inhalt enthält, denken Benutzer, dass eine langsamere Exportgeschwindigkeit sinnvoll und viel besser ist als eine langsame Seitenladegeschwindigkeit .

Weitere Informationen zu Lauii finden Sie im Layui-Framework.

Das obige ist der detaillierte Inhalt vonLaui exportiert alle Daten in der Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!