Application des paramètres de base dans le module table de layui

Le module table de Layui est un objectif majeur et est aussi convivial que possible en termes de paramètres de base, c'est-à-dire qu'il garantit le principe de fonctionnalité tout en évitant les configurations trop compliquées.

Les paramètres de base apparaissent généralement dans les scénarios suivants :

Scénario 1 : Le contenu des données générales suivantes correspond aux éléments des paramètres de base, rappelez-vous : la valeur doit être entre guillemets simples

<table lay-data="{height:300, url:&#39;/api/data&#39;}" lay-filter="demo"> …… </table>

Scénario 2 : La valeur clé dans la méthode suivante est le paramètre de base item

table.render({
  height: 300
  ,url: '/api/data'
});

Autres scénarios : Les options suivantes contiennent des paramètres de base Objet de l'élément

> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

Ensuite, regardons quels sont les é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. en-tête du tableau, ici contient de nombreuses valeurs et est un tableau à deux dimensions. 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 est le

des deux paramètres rowspan et colspan. Voici ensuite quelques paramètres dans l'en-tête

< 1> ; champ : définissez le nom du champ

table.render({
  cols: [[
    {field: 'id'} //其它参数在此省略
    ,{field: 'username'}
  ]]
});
 
等价于：
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

<2> titre : définissez le nom du titre

table.render({
  cols: [[
    {title: '邮箱'} //其它参数在此省略
    ,{title: '签名'}
  ]]
});
 
等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:&#39;邮箱&#39;）
<th lay-data="{}">签名</th>

<3> définissez la largeur de colonne fixe . 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: [[
    {width: 80} //其它参数在此省略
    ,{width: 120}
  ]]
});
 
等价于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>

<4> case à cocher : cochez la case. Si défini sur true, cela signifie que le contenu de cette colonne est une case à cocher, généralement elle est placée dans la première colonne.

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>

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

<5> espace : 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: [[ //其它参数在此省略
    {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>

<6> trier : indique si le tri est requis. Si défini sur 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: [[
    {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>

<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: [[
    {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>

<8> modifier : s'il faut autoriser la modification. Si défini sur 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: [[
    {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>

<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 ceci. paramètre. C'est une fonction très pratique, et le contenu de votre table sera riche et diversifié.

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>

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

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

<10> Habituellement, vous devez ajouter des boutons d'opération similaires tels que afficher, modifier, 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 templet. Il accepte généralement un sélecteur ou un segment de caractères HTML.

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>

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

<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="" 是模板的关键所在，值可随意定义。

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

//监听工具条
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  }
});

Pour plus de connaissances liées à 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!