Tutoriel détaillé sur la table dynamique de BootStrapTable [avec code]

Cet article explique comment utiliser le plug-in de table bootstrap pour implémenter des tables dynamiques.

Tutoriel recommandé : Tutoriel Bootstrap

Lorsque nous construisons BootStrapTable (ci-après dénommé : BsTable), où les colonnes Les paramètres sont stockés en tant que contenu des colonnes du tableau. Notre exigence est de générer dynamiquement le contenu des paramètres de colonnes en fonction des données renvoyées. Cela génère des tables dynamiques.

format des paramètres de colonnes : similaire au suivant

columns: {
    {
        field: 'Id',
        title: '编号',
    },{
        field: 'name',
        title: '名称',
    },{
        field: 'sex',
        title: '性别',
        //自定义方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

Condition : envoyez une requête ajax en cliquant sur le bouton et créez un tableau dynamique basé sur les données renvoyées par la requête.

Structure des boutons : définir l'événement de clic

<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
    <i class="fa fa-check"></i> SQL语句执行
</button>

Écriture de l'événement de clic : dataQuery.js (Remarque : ceci sera analysé morceau par morceau, La version complète sera être publié à la fin du code)

1. Obtenez la valeur de l'élément de page html

Puisque deux paramètres sont nécessaires pour implémenter cela. fonction : instruction SQL (sql ) + informations de connexion (connectInfo), vous devez donc d'abord obtenir les valeurs​​des deux éléments de la page : le sélecteur de classe sélectionne l'élément pour obtenir la valeur correspondante.

var sql = $('#sql').val();
var connectInfo = $('#connectInfo').val();

2. Sélectionnez l'élément de table sur la page, envoyez une requête ajax et créez le BSTable

L'élément de table sur la page. : utilisez les balises beetl, remplacez le code html réutilisé par une ligne de balises de code, pratique à utiliser et facile à entretenir.

<#table id="DataQueryTable"/>

　2.1 Configuration des paramètres de requête Ajax

参数	含义
type	请求类型
url	请求链接地址
contentType	发送给服务器的格式
dataType	收到数据的格式
data	发送给服务端的数据
success	请求成功时调用
error	请求失败时调用

Code détaillé :

$('#DataQueryTable').bootstrapTable({
    ajax: function (request) {
        $.ajax({
            type: "GET",
            url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            json: 'callback',
            success: 见下文
            error: 见下文
    })
})

　2.2 La requête Ajax est réussie, construite sur la base du données json renvoyées En-tête dynamique

2.2.1 Initialiser le tableau d'en-tête dynamique personnalisé

 //定义动态表头字段数组
    var dynamicHeader = [];
    //向数组中填入属性
    dynamicHeader.push({
        field: "state",
        check: true
    });

2.2.2 Génération d'en-tête dynamique

  //针对返回的json数据，遍历json数据的key集合
   for (var i = 0; i<(Object.keys(json[0])).length; i++) {
       //获取对应索引的value值，将获取的值设置到动态表头字段中。
       var property = (Object.keys(json[0]))[i];
       dynamicHeader.push({
           "title": property,
           "field": property,
           //显示是否显示隐藏
           switchable: true,
           //是否开启排序
           sortable: true
       });
   }

Nous pouvons parcourir ce code ensemble Appuyez sur F12 pour afficher le contenu spécifique dans Object.keys(json[0]) : simulez une requête/test.

2.2.3 Construire la table La table doit être détruite avant de construire la table, sinon le dernier contenu chargé sera conservé

  $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
       //得到的json数据，会根据columns参数进行对应赋值配置
       data: json,
       //Bstable工具导航条
       toolbar: '#toolbar',
       //浏览器缓存，默认为true，设置为false避免页面刷新调用浏览器缓存
       cache: false,
       //是否显示行间隔色
       striped: true,
       //分页方式：client客户端分页，server服务端分页
       sidePagination: "client",
       //排序方式
       sortOrder: "desc",
       //每页记录行数
       pageSize: 25,
       //初始化加载第一页
       pageNumber: 1,
       //可供选择的每页行数
       pageList: "[25, 50, 100, All]",
       //是否显示切换按钮
       showToggle: true,
       //是否显示所有的列
       showColumns: true,
       //是否显示导出按钮(下篇文章将会提到)
       showExport: true,
       //导出数据类型(下篇文章将会提到)
       exportDataType: "basic",
       //是否显示分页
       pagination: true,
       //是否启用全匹配搜索，否则为模糊搜索
       strictSearch: true,
       //开启搜索
       search: true,
       //自定义所生成的动态表头放入，结合上述json数据，实现表格数据内容的构建
       columns: dynamicHeader
   });
 },

2.3 Échec de la requête ajax, fenêtre contextuelle signalant un message d'erreur, rechargement de la page

error: function () {
    alert("SQL查询错误，请输入正确的SQL语句！");
    location.reload();
}

Code js complet

/**
 *  BsTable动态表格生成
 */
DataQuery.sqlExecute = function (){

    var sql = $('#sql').val();
    var connectInfo = $('#connectInfo').val();

    $('#DataQueryTable').bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: 'callback',
                success: function (json) {

                    var dynamicHeader = [];
                    dynamicHeader.push({
                        field: "state",
                        check: true
                    });

                    for (var i = 0; i<(Object.keys(json[0])).length; i++) {
                        var property = (Object.keys(json[0]))[i];
                        //console.log(property);
                        dynamicHeader.push({
                            "title": property,
                            "field": property,
                            switchable: true,
                            sortable: true
                        });
                    }

                    //console.log(Object.keys(json[0]));

                    $(&#39;#DataQueryTable&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
                        data: json,
                        toolbar: &#39;#toolbar&#39;,
                        cache: false,
                        striped: true,
                        sidePagination: "client",
                        sortOrder: "desc",
                        pageSize: 25,
                        pageNumber: 1,
                        pageList: "[25, 50, 100, All]",
                        showToggle: true,
                        showColumns: true,
                        showExport: true,
                        exportDataType: "basic",
                        pagination: true,
                        strictSearch: true,
                        search: true,
                        columns: dynamicHeader
                    });
                },
                error: function () {
                    alert("SQL查询错误，请输入正确的SQL语句！");
                    location.reload();
                }
            });
        }
    });
};

3. Testez les résultats de la génération de table dynamique

　3.1 Le test est divisé en deux parties. Tout d'abord, récupérez les données json obtenues par la requête, et simuler la requête pour obtenir 100 éléments de données

@RequestMapping(value = "/test")
    @ResponseBody
    public Object test(){
        return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" +
                "      ,[S_INFO_WINDCODE]\n" +
                "      ,[S_CON_WINDCODE]\n" +
                "      ,[S_CON_INDATE]\n" +
                "      ,[S_CON_OUTDATE]\n" +
                "      ,[CUR_SIGN]\n" +
                "      ,[OPDATE]\n" +
                "      ,[OPMODE]\n" +
                "  FROM [WIND].[db_datareader].[AINDEXMEMBERS]");
    }

　3.2 Afficher les données json renvoyées par la requête

　3.3 Tester la génération de table dynamique

La requête ci-dessus peut renvoyer des données normalement, mais qu'en est-il de la BSTable dynamique que nous avons construite via une requête ajax ?

La requête est : informations sur l'instruction SQL/le lien, et la requête ajax renvoie des données json, ce qui est cohérent avec la requête ci-dessus.

Consultez notre statut de génération de table dynamique :

Bingo, alors Jusqu'à présent, la fonction de table dynamique BootStrapTable a été implémentée.

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!