Grundlegende Parameteranwendung im Tabellenmodul in Laui

Das Tabellenmodul von Layui steht im Mittelpunkt und ist in Bezug auf die Grundparameter so benutzerfreundlich wie möglich, d. h. es stellt die Voraussetzung der Funktionalität sicher und vermeidet gleichzeitig übermäßig komplizierte Konfigurationen.

Grundlegende Parameter erscheinen im Allgemeinen in den folgenden Szenarien:

Szenario 1: Der Inhalt in den folgenden Laiendaten sind die Grundparameterelemente, Denken Sie daran: Der Wert muss in einfachen Anführungszeichen stehen

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

Szenario 2: Der Schlüsselwert in der folgenden Methode ist der Basisparameter item

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

Weitere Szenarien: Die folgenden Optionen enthalten Basisparameter Item object

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

Werfen wir einen Blick auf die Grundelemente?

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 Tabellenkopf, hier Enthält viele Werte und ist ein zweidimensionales 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 ist das

der beiden Parameter rowspan und colspan. Als nächstes folgen einige Parametereinstellungen im Header

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

<2> Titel: Legen Sie den Titelnamen fest

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

<4> Kontrollkästchen: Aktivieren Sie das Kontrollkästchen.

Wenn der Wert 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 sollte auch beachtet werden, 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 ausgewählt 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>

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

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

<7> fest: Ob feste Spalten erforderlich sind.

Wenn „true“ oder „right“ gesetzt ist, wird die entsprechende Spalte links oder rechts fixiert und wird 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>

<8>

Wenn auf „true“ gesetzt, 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>

<9>

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 tun Parameter. 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>

<10>

Normalerweise müssen Sie in jeder Zeile der Tabelle ähnliche Bedienschaltflächen wie Anzeigen, Bearbeiten und Löschen hinzufügen. Dafür wurden die 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 ein Segment von 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="" 是模板的关键所在，值可随意定义。

Weitere Informationen zum Thema Lauii finden Sie im

Layui-Framework

.

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