Heim > Artikel > Web-Frontend > Grundlegende Parameteranwendung im Tabellenmodul in Laui
Grundlegende Parameteranwendung im Tabellenmodul in Laui
- 尚nach vorne
- 2019-11-19 17:07:222842Durchsuche
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:'/api/data'}" 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: '#test' //或 elem: document.getElementById('test') 等
});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:'id', width:80}">ID</th>
<th lay-data="{field:'username', 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:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
<th lay-data="{align:'center'}" colspan="3">地址</th>
</tr>
<tr>
<th lay-data="{field:'province', width:80}">省</th>
<th lay-data="{field:'city', width:120}">市</th>
<th lay-data="{field:'county', 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
acc80a873886d8118be81a328be9ec64 Feld: Legen Sie den Feldnamen fest
table.render({
cols: [[
{field: 'id'} //其它参数在此省略
,{field: 'username'}
]]
});
等价于：
<th lay-data="{field:'id'}"></th>
<th lay-data="{field:'username'}"></th>2cc198a1d5eb0d3eb508d858c9f5cbdb Titel: Legen Sie den Titelnamen fest
5bdf4c78156c7953567bb5a0aef2fc53 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:'邮箱'）
<th lay-data="{}">签名</th>
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:'id', 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:'id', width:100}">ID</th>
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:'id', 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 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:'id', width:100}">ID</th>
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:'id', width:100}">ID</th>
<th lay-data="{field:'username', width:120, fixed:'right'}">姓名</th>
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:'text'}"></th>
<th lay-data="{field:'id', 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:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>eebe431eeb58984ec8915354762c30c6 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: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意：这里一定要被一层 <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:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></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-FrameworkDas 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!