Une brève discussion sur l'utilisation des tables parent-enfant et l'ordre des lignes et des colonnes dans la table Bootstrap-js tutoriel-php.cn

Une brève discussion sur l'utilisation des tables parent-enfant et l'ordre des lignes et des colonnes dans la table Bootstrap

PHPz

Libérer： 2021-05-28 17:07:22

avant

4613 Les gens l'ont consulté

Cet article combine l'utilisation de la table parent-enfant de la table Bootstrap et l'ordre ligne-colonne, puis présente son utilisation légèrement plus avancée. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion sur l'utilisation des tables parent-enfant et l'ordre des lignes et des colonnes dans la table Bootstrap

[Recommandations associées : "Tutoriel bootstrap"]

Affichage des effets

Aujourd'hui, nous allons légèrement modifier la méthode. Examinons d'abord l'effet d'implémentation, puis présentons l'implémentation du code et les précautions plus tard. Allez, voici les rendus :

1. Les rendus de la table père et fils

2. Réorganisation des lignes

Avant le réordonnancement

Faites glisser la réorganisation des lignes à La première ligne

3. Commande des colonnes

Avant de commander

Faites glisser les en-têtes de colonnes pour trier

Après le tri

2. Code de table parent-enfant Explication détaillée

Dans le dernier chapitre, nous avons présenté l'utilisation de base de la table Bootstrap. Lors de l'initialisation de la table, il y a un attribut "detailView". Définissez-le sur true, et vous verrez un devant. de chaque ligne. Cliquer sur cette icône déclenche l'événement de chargement de la sous-table. C'est le principe général. Regardons le code. C'est en fait très simple.

1. Initialisez la table et enregistrez l'événement d'expansion de ligne

　　　 　　　　$("#tb_powerset").bootstrapTable({
                url: &#39;/api/MenuApi/GetParentMenu&#39;,
                method: &#39;get&#39;,
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: &#39;MENU_NAME&#39;,
                    title: &#39;菜单名称&#39;
                }, {
                    field: &#39;MENU_URL&#39;,
                    title: &#39;菜单URL&#39;
                }, {
                    field: &#39;PARENT_ID&#39;,
                    title: &#39;父级菜单&#39;
                }, {
                    field: &#39;MENU_LEVEL&#39;,
                    title: &#39;菜单级别&#39;
                }, ],                //注册加载子表的事件。注意下这里的三个参数！
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });

Copier après la connexion

Jetons un coup d'œil à l'événement de chargement de sous-table onExpandRow, fonction de la méthode correspondante (index, row, $detail) Les trois paramètres,

index : l'index de la ligne actuelle de la table parent.

row : objet de données Json de la ligne actuelle de la table parent.

$detail : objet td dans la nouvelle ligne créée en dessous de la ligne actuelle.

Le troisième paramètre est particulièrement important car la table sous-table générée est chargée dans l'objet $detail. La table d'amorçage génère l'objet $detail pour nous, et il nous suffit ensuite de le remplir avec la table souhaitée.

2. Jetons un coup d'œil à la méthode oInit.InitSubTable()

    //初始化子表格(无线循环)
    oInit.InitSubTable = function (index, row, $detail) {        var parentid = row.MENU_ID;        var cur_table = $detail.html(&#39;<table></table>&#39;).find(&#39;table&#39;);
        $(cur_table).bootstrapTable({
            url: &#39;/api/MenuApi/GetChildrenMenu&#39;,
            method: &#39;get&#39;,
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            clickToSelect: true,
            detailView: true,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: &#39;MENU_NAME&#39;,
                title: &#39;菜单名称&#39;
            }, {
                field: &#39;MENU_URL&#39;,
                title: &#39;菜单URL&#39;
            }, {
                field: &#39;PARENT_ID&#39;,
                title: &#39;父级菜单&#39;
            }, {
                field: &#39;MENU_LEVEL&#39;,
                title: &#39;菜单级别&#39;
            }, ],            //无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };

Copier après la connexion

De là, nous pouvons voir que le principe de génération d'une sous-table est de créer un objet table cur_table. Enregistrez ensuite l'initialisation de la table de cet objet. N'est-ce pas très simple~~

3. Explication détaillée du code de séquence de ligne

Le code de séquence de ligne est encore plus simple, jetons un coup d'œil.

1. Deux fichiers js supplémentaires doivent être référencés

<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

Copier après la connexion

2 Lors de la définition de la table sur la page cshtml, ajoutez deux attributs <🎜. >

<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>

Copier après la connexion

Il n'est alors pas nécessaire d'apporter des modifications lorsque la table js est initialisée. La table chargée peut réaliser la fonction de classement des lignes.

4. Explication détaillée du code de commande des colonnes

Similaire à l'ordre des lignes. L'utilisation de l'ordre des colonnes est la suivante :

1. Référencez quelques js et css supplémentaires

<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Copier après la connexion

2. page cshtml, ajoutez Un attribut

<table id="tb_departments" data-reorderable-columns="true"></table>

Copier après la connexion

n'a pas besoin d'être modifié à d'autres endroits. Le tableau chargé peut être trié par colonnes. Est-ce très simple ?

5. Contrôler le filtrage

J'étais sur le point de terminer cet article, mais du coup je me suis rappelé qu'il y avait une fonction de recherche dans le chapitre précédent. La fonction n'était pas disponible lors de la pagination côté serveur. Je ne peux pas l'utiliser, je me suis donc souvenu que j'avais déjà utilisé une fonction similaire au filtrage de chaque colonne dans CS. Le blogueur est à nouveau curieux de savoir si la table d'amorçage a également cette fonction. en filtrant chaque colonne du tableau, j'ai donc vérifié le document. Le résultat est à la hauteur des attentes, ça marche vraiment~~ Jetons un coup d'oeil.

1. Affichage du rendu

2. Exemple de code

(1) Introduire des js supplémentaires

<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>

Copier après la connexion

(2) Définir les attributs de table et les attributs d'en-tête

 　　<table id="tb_roles" data-filter-control="true">
        <thead>
            <tr>
                <th data-field="ROLE_NAME" data-filter-control="select">角色名称</th>
                <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
            </tr>
        </thead>
    </table>

Copier après la connexion

Les attributs de l'en-tête du tableau étant définis ici, il n'est pas nécessaire de définir des colonnes lorsque js est initialisé.

(3) initialisation js

 $(&#39;#tb_roles&#39;).bootstrapTable({
        url: &#39;/Role/GetRole&#39;,
        method: &#39;get&#39;,
        toolbar: &#39;#toolbar&#39;,
        striped: true,
        cache: false,
        striped: true,
        pagination: true,
        sortable: true,
        queryParams: function (param) {            return param;
        },
        queryParamsType: "limit",
        detailView: false,//父子表
        sidePagination: "server",
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        
    });

Copier après la connexion

最开始，博主以为这种搜索只能用户客户端分页的情况，可是经过调试发现并非如此，原来搜索的条件都能通过json传递到服务端。我们来看调试的过程