Comment utiliser les paramètres de base dans le module table dans layui

Introduction :

layui est une solution d'interface utilisateur frontale construite avec passion par des développeurs front-end professionnels et destinée à tous les niveaux de front-end et développeurs back-end. Il s'agit d'une solution d'interface utilisateur frontale prête à l'emploi et à faible seuil.

Le module table de Layui est un objectif majeur et est le plus convivial possible en termes de paramètres de base, c'est-à-dire assurer les prérequis de fonctionnalité tout en évitant les configurations trop compliquées. Les paramètres de base apparaissent généralement dans les scénarios suivants :

场景一：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:&#39;/api/data&#39;}" lay-filter="demo"> …… </table>

场景二：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: &#39;/api/data&#39;
});

更多场景：下述options即为含有基础参数项的对象
> table.init(&#39;filter&#39;, options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

Jetons un coup d'œil aux éléments de base ?

1. elem - L'élément de liaison spécifie le conteneur de table d'origine, qui s'applique uniquement à la méthode de rendu de table.render()

HTML：
<table id="test"></table>

JS：
table.render({ //其它参数在此省略
  elem: &#39;#test&#39; //或 elem: document.getElementById(&#39;test&#39;) 等
});

2 Définissez l'en-tête de table, qui en contient plusieurs. valeurs. Il s’agit d’un tableau bidimensionnel. Si vous utilisez le « rendu au niveau de la méthode » des tableaux, vous devez alors utiliser ce paramètre pour définir le tableau. Par exemple :

JS：
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
});

它等价于：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:&#39;id&#39;, width:80}">ID</th>
      <th lay-data="{field:&#39;username&#39;, width:180}">用户名</th>
    </tr>
  </thead>
</table>

Ce qui suit est un exemple d'en-tête secondaire :

JS：
table.render({
  cols:  [[ //标题栏
    {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: 'amount', title: '金额', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '详细', width: 300}
  ]]
});
 
它等价于：
<table class="layui-table" lay-data="{基础参数}">
  <thead>
    <tr>
      <th lay-data="{field:&#39;username&#39;, width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:&#39;amount&#39;, width:120}" rowspan="2">金额</th>
      <th lay-data="{align:&#39;center&#39;}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:&#39;province&#39;, width:80}">省</th>
      <th lay-data="{field:&#39;city&#39;, width:120}">市</th>
      <th lay-data="{field:&#39;county&#39;, width:300}">详细</th>
    </tr>
  </thead>
</table>

Il convient de noter que le module table prend en charge les en-têtes Infinitus et que vous pouvez continuer à l'étendre de la manière ci-dessus. . Le point central réside dans le

des deux paramètres rowspan et colspan. Ensuite, quelques paramètres dans le champ d'en-tête

f35d6e602fd7d0f0edfa6f7d103c1b57 >2cc198a1d5eb0d3eb508d858c9f5cbdb titre : définissez le nom du titre

table.render({
  cols: [[
    {field: 'id'} //其它参数在此省略
    ,{field: 'username'}
  ]]
});

等价于：
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

5bdf4c78156c7953567bb5a0aef2fc53 Le réglage de la largeur des colonnes est généralement nécessaire (sauf pour les "colonnes spéciales", telles que les colonnes de cases à cocher, les barres d'outils, etc.), ce qui est lié à la beauté globale du tableau.

table.render({
  cols: [[
    {title: '邮箱'} //其它参数在此省略
    ,{title: '签名'}
  ]]
});

等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:&#39;邮箱&#39;）
<th lay-data="{}">签名</th>

23889872c2e8594e0f446a471a78ec4c case à cocher : cochez la case. Si la valeur est true, cela signifie que le contenu de cette colonne est une case à cocher, généralement placée dans la première colonne.

table.render({
  cols: [[
    {width: 80} //其它参数在此省略
    ,{width: 120}
  ]]
});

等价于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>

Il convient également de noter que LAY_CHECKED ici est utilisé conjointement avec la case à cocher Si elle est définie sur true, cela signifie que toutes les cases sont cochées par défaut.

table.render({
  cols: [[
    {checkbox: true} //其它参数在此省略
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等价于：
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

43ad812d3a971134e40facaca816c822 space : définissez la colonne d'espacement. Si défini sur true, définit une colonne de 15 px de largeur sans contenu.

table.render({
  cols: [[
    {checkbox: true, LAY_CHECKED: true} //其它参数在此省略
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等价于：
<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

efbfa0de8737dc86eae413541a49df20 trier : indique si le tri est requis. Si la valeur est true, l'icône de tri sera affichée dans l'en-tête du tableau correspondant, activant ainsi la fonction de tri pour la colonne.

Remarque : Il n'est pas recommandé d'activer le tri pour les colonnes dont les valeurs existent : nombres et caractères ordinaires, car cela entrerait dans une comparaison lexicographique. Par exemple : 'Xianxin' > '2' > '100', ce n'est peut-être pas le résultat souhaité, mais l'algorithme de tri du dictionnaire (comparaison de code ASCII) est comme ceci. Vous pouvez également en savoir plus sur le dictionnaire. connaissance des séquences.

table.render({
  cols: [[ //其它参数在此省略
    {space: true}
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等价于：
<th lay-data="{space:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

40107655ec554331c1c6222ab67a141c fixe : indique si des colonnes fixes sont requises. Si true ou 'right' est défini, la colonne correspondante sera fixée à gauche ou à droite et ne défilera pas avec la barre de défilement.

table.render({
  cols: [[
    {sort:true} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});

等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

37cd6113a8c348d99fa846f2c6fcea98 modifier : s'il faut autoriser la modification. Si la valeur est true, les cellules de la colonne correspondante pourront être modifiées. Actuellement, seule la modification des entrées de type="text" est prise en charge.

table.render({
  cols: [[
    {fixed:true} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
    ,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右
  ]]
});

等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{field:&#39;username&#39;, width:120, fixed:&#39;right&#39;}">姓名</th>

c161494dba5e0dd0fb25d890c74e408d modèle : modèle personnalisé. Par défaut, le contenu de la cellule est affiché exactement tel qu'il est renvoyé par l'interface de données. Si vous souhaitez ajouter des liens et d'autres éléments aux cellules d'une certaine colonne, vous pouvez facilement le faire à l'aide de ce paramètre. C'est une fonction très pratique, et le contenu de votre table sera riche et diversifié.

table.render({
  cols: [[
    {edit:'text'} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});

等价于：
<th lay-data="{edit:&#39;text&#39;}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

En fait, un modèle peut aussi être directement un élément de contenu HTML, tel que :

table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});

等价于：
<th lay-data="{field:&#39;title&#39;, width: 200, templet: &#39;#titleTpl&#39;}">文章标题</th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

eebe431eeb58984ec8915354762c30c6 Habituellement, vous devez ajouter des boutons d'opération similaires tels que afficher, modifier et supprimer dans chaque ligne du tableau, et le paramètre d'outil est né pour cela, vous pouvez donc implémenter diverses fonctions d'opération très facilement. Le paramètre tool s'utilise exactement de la même manière que le paramètre template. Il accepte généralement un sélecteur ou un paragraphe de caractères HTML.

 templet: &#39;<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>&#39;
 注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

Voici le modèle correspondant à la barre d'outils, qui peut être stocké n'importe où sur la page :

table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});

等价于：
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}"></th>

Ensuite, nous utilisons les événements de barre d'outils du module table pour compléter différentes fonctions d'exploitation :

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>

  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
  {{#  } }}
</script>

注意：属性 lay-event="" 是模板的关键所在，值可随意定义。

Recommandations associées :

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!