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

<1> ><2> 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>

<3> 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>

<4> 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>

<5> 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>

<6> 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>

<7> 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>

<8> 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>

<9> 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>

<10> 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!