layui exporte toutes les données du tableau

layui (homophone : UI-like) est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module. Il suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. Le seuil est extrêmement bas et peut être utilisé. de la boîte.

La table d'exportation fournie avec layui ne peut exporter que la page actuelle si la page actuelle contient toutes les données, alors cela signifie exporter toutes les données, donc je donne le. événement d'exportation, une demande distincte est définie. Lorsque cette demande est déclenchée, lors de l'interrogation des données en arrière-plan, n'interrogez pas en fonction de la page et de la limite reçues, mais interrogez tout, réalisant ainsi l'exportation de toutes les données.

Code page :

<!--导出按钮 或其他触发事件-->
<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');
        });
    })

Traitement en arrière-plan :

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

Optimisation : Le code correspondant est le deuxième code js ci-dessus :

//导出改为单独的事件，每次点击导出才会执行
    $(".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');
            }
        });
    })

est en fait la table . exportFile(ins1.config.id,exportData, 'xls'); est placé dans done. Bien qu'il semble qu'il n'y ait pas beaucoup de changements, l'essence a changé. La méthode précédente consistait à charger la table d'exportation cachée lors de l'entrée dans la page.

Désormais, la table d'exportation masquée ne sera rendue que lorsque l'on clique sur l'exportation. Lorsque la table d'exportation contient beaucoup de contenu, les utilisateurs penseront qu'une vitesse d'exportation plus lente est raisonnable et est bien meilleure qu'une vitesse de chargement de page plus lente. .

Pour plus de connaissances sur Layui, veuillez faire attention au framework layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!