Verwenden Sie Laui, um eine Tabellendatentabelle zu rendern (Beispiel)

Das

Tabellenmodul ist eine der Kernkomponenten des Layui-Frameworks. Es wird zur Ausführung einer Reihe von Funktionen und dynamischen Datenoperationen an Tabellen verwendet und deckt nahezu alle Anforderungen im Tagesgeschäft ab.

Unterstützt feste Kopfzeile, feste Zeile, feste Spalte links/Spalte rechts, unterstützt Ziehen zum Ändern der Spaltenbreite, unterstützt Sortierung, unterstützt mehrstufige Kopfzeilen, unterstützt benutzerdefinierte Vorlagen für Zellen und unterstützt das Neuladen von Tabellen (z. B. Suche). , bedingte Filterung usw.), unterstützt Kontrollkästchen, unterstützt Paging, unterstützt die Zellenbearbeitung und andere Funktionen.

Trotzdem werden wir es von Zeit zu Zeit verbessern und benutzerfreundlichere Funktionen hinzufügen und gleichzeitig das Codevolumen und die Leistung kontrollieren. Das Tischmodul wird auch eines der wichtigsten Wartungsprojekte von Laui sein.

Beispiel einer Laui-Rendering-Tabellendatentabelle:

1. Stellen Sie die CSS- und JS-Dateien von Laui vor

link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="lib/layui/layui.js"></script>

2. Platzieren Sie ein Tabellenelement auf der Seite

<table class="layui-hide" id="test" lay-filter=&#39;test3&#39;></table>

3. Geben Sie den Container über die Methode table.render() an

layui.use('table', function(){
            var table = layui.table;
//            var playerName;
//            if(item != undefined) {
//                playerName=item;
//            }
            table.render({
                elem: '#test'  table 容器的选择器或 DOM
                ,url:'http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds'
                ,method:'post'
                ,where:{tourId:tourIds,rounds:rounds,playerName:item}
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'tourPlayerId', width:80, title: 'ID1', sort: true}
                    ,{field:'playerName', width:80, title: '姓名'}
                    ,{field:'hole1',  title: '1',edit: 'text'}
                    ,{field:'hole2', title: '2',edit: 'text'}
                    ,{field:'hole3', title: '3',edit: 'text'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'hole4', title: '4',edit: 'text'}
                    ,{field:'hole5', title: '5',edit: 'text'}
                    ,{field:'hole6', title: '6',edit: 'text'}
                    ,{field:'hole7', title: '7',edit: 'text'}
                    ,{field:'hole8', title: '8',edit: 'text'}
                    ,{field:'hole9', title: '9',edit: 'text'}
                    ,{field:'hole10', title: '10',edit: 'text'}
                    ,{field:'hole11', title: '11',edit: 'text'}
                    ,{field:'hole12', title: '12',edit: 'text'}
                    ,{field:'hole13', title: '13',edit: 'text'}
                    ,{field:'hole14', title: '14',edit: 'text'}
                    ,{field:'hole15', title: '15',edit: 'text'}
                    ,{field:'hole16', title: '16',edit: 'text'}
                    ,{field:'hole17', title: '17',edit: 'text'}
                    ,{field:'hole18', title: '18',edit: 'text'}
                    ,{field:'add', title: '操作', width:177,toolbar:"#barDemo"}

4. Zu diesem Zeitpunkt sieht Ihre Seite fast wie folgt aus

5. Text Wie werden nun die Tabellendaten gerendert? Der dritte Teil unseres oben genannten ist eine Methode zum Rendern, die als „Methodenrendering“ bezeichnet wird. Die drei von der offiziellen Laui-Website bereitgestellten Rendermethoden werden hier nicht beschrieben. Der Vorteil der Rendermethode ist: Sie können sie trennen die HTML-Datei und konzentrieren Sie sich auf JS selbst. Insbesondere bei häufigen Änderungen und Veröffentlichungen von Projekten ist die Zweckmäßigkeit offensichtlicher.

Layuis URL ist standardmäßig eine „Get“-Anfrage und meine ist eine Post-Anfrage. Denken Sie also daran, das Attribut „method“ hinzuzufügen Beitrag,

6. Logischerweise sollten Sie die Tabellendaten zu diesem Zeitpunkt noch nicht sehen können. Normalerweise liegt es daran, dass deine Schwester das Hintergrunddatenformat

response: {
    statusName: 'code' //数据状态的字段名称，默认：code
    ,statusCode: 200 //成功的状态码，默认：0
    ,msgName: 'msg' //状态信息的字段名称，默认：msg
    ,countName: 'count' //数据总数的字段名称，默认：count
    ,dataName: 'data' //数据列表的字段名称，默认：data

konfiguriert hat und der Effekt wie folgt ist:

Das obige ist der detaillierte Inhalt vonVerwenden Sie Laui, um eine Tabellendatentabelle zu rendern (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!