So verwenden Sie grundlegende Parameter im Tabellenmodul in Laui

Einführung:

layui ist eine sofort einsatzbereite Front-End-UI-Lösung mit niedrigem Schwellenwert, die von professionellen Front-End-Entwicklern für alle Ebenen von Front-End- und Back-End-Entwicklern entwickelt wurde. Das Tabellenmodul von

layui ist ein wichtiges Modul, das es hinsichtlich der Grundparameter so benutzerfreundlich wie möglich macht, d. h. die Voraussetzung der Funktionalität gewährleistet und gleichzeitig übermäßig komplizierte Konfigurationen vermeidet. Grundparameter erscheinen im Allgemeinen in den folgenden Szenarien:

场景一：下述 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); //重载表格

Schauen wir uns als nächstes an, was die Grundelemente sind?

1. elem – Das Bindungselement gibt den ursprünglichen Tabellencontainer an, der nur auf die Rendering-Methode von table.render() anwendbar ist.

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

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

2 Legen Sie den Tabellenkopf fest, der viele Werte enthält. dimensionales Array. Wenn Sie das „Rendering auf Methodenebene“ von Tabellen verwenden, müssen Sie diesen Parameter zum Festlegen der Tabelle verwenden. Zum Beispiel:

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>

Das Folgende ist ein Beispiel für einen sekundären Header:

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>

Es ist zu beachten, dass das Tabellenmodul Infinitus-Header unterstützt und Sie es auf die oben beschriebene Weise weiter erweitern können. Der Kernpunkt liegt in den beiden Parametern rowspan und colspan.

Der nächste Schritt besteht darin, einige Parameter im Tabellenkopf festzulegen.

f35d6e602fd7d0f0edfa6f7d103c1b57 Feld: Legen Sie den Feldnamen fest

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

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

5bdf4c78156c7953567bb5a0aef2fc53 Breite: Spaltenbreite festlegen. Die Einstellung der Spaltenbreite ist in der Regel notwendig (mit Ausnahme von „Spezialspalten“ wie Kontrollkästchenspalten, Symbolleisten usw.), was mit der Gesamtschönheit der Tabelle zusammenhängt.

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

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

23889872c2e8594e0f446a471a78ec4c Kontrollkästchen: Aktivieren Sie das Kontrollkästchen. Wenn es auf „true“ gesetzt ist, bedeutet dies, dass der Inhalt dieser Spalte ein Kontrollkästchen ist. Normalerweise wird es in der ersten Spalte platziert.

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

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

Es ​​ist auch zu beachten, dass LAY_CHECKED hier in Verbindung mit dem Kontrollkästchen verwendet wird. Wenn es auf „true“ gesetzt ist, bedeutet dies, dass alle Kontrollkästchen standardmäßig aktiviert sind.

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 Leerzeichen: Legen Sie die Lückenspalte fest. Wenn auf „true“ gesetzt, wird eine 15 Pixel breite Spalte ohne Inhalt definiert.

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 Sortierung: Ob eine Sortierung erforderlich ist. Wenn auf „true“ gesetzt, wird das Sortiersymbol im entsprechenden Tabellenkopf angezeigt und dadurch die Sortierfunktion für die Spalte aktiviert.

Hinweis: Es wird nicht empfohlen, die Sortierung für Spalten zu aktivieren, deren Werte vorhanden sind: Zahlen und gewöhnliche Zeichen, da dadurch ein lexikografischer Vergleich erfolgt. Beispiel: „Xianxin“ > „2“ > Sequenzwissen.

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 fest: Ob feste Spalten erforderlich sind. Wenn true oder 'right' gesetzt ist, wird die entsprechende Spalte links oder rechts fixiert und nicht mit der Bildlaufleiste gescrollt.

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 Bearbeiten: Ob die Bearbeitung zugelassen werden soll. Wenn dieser Wert auf „true“ gesetzt ist, können die Zellen in der entsprechenden Spalte bearbeitet werden. Derzeit wird nur die Eingabebearbeitung vom Typ „text“ unterstützt.

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 Vorlage: Benutzerdefinierte Vorlage. Standardmäßig wird der Inhalt der Zelle genau so ausgegeben, wie er von der Datenschnittstelle zurückgegeben wird. Wenn Sie den Zellen einer bestimmten Spalte Links und andere Elemente hinzufügen möchten, können Sie dies ganz einfach mit Hilfe dieses Parameters tun. Dies ist eine sehr praktische Funktion und der Inhalt Ihrer Tabelle wird reichhaltig und vielfältig sein.

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>

Tatsächlich kann template auch direkt ein Teil des HTML-Inhalts sein, wie zum Beispiel:

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 Symbolleiste: Symbolleiste binden. Normalerweise müssen Sie in jeder Zeile der Tabelle ähnliche Bedienschaltflächen wie Anzeigen, Bearbeiten und Löschen hinzufügen. Dafür wurden Werkzeugparameter entwickelt, sodass Sie verschiedene Bedienfunktionen sehr bequem implementieren können. Der Tool-Parameter wird genauso verwendet wie der Templet-Parameter. Er akzeptiert normalerweise einen Selektor oder einen Absatz mit HTML-Zeichen.

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

Das Folgende ist die der Symbolleiste entsprechende Vorlage, die an einer beliebigen Stelle auf der Seite gespeichert werden kann:

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>

Als nächstes verwenden wir die Symbolleistenereignisse des Tabellenmoduls, um verschiedene Bedienfunktionen auszuführen:

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

Verwandte Empfehlungen:

layui

Das obige ist der detaillierte Inhalt vonSo verwenden Sie grundlegende Parameter im Tabellenmodul in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!