So implementieren Sie bearbeitbare Tabellenfunktionen mit Layui

So verwenden Sie Layui zum Implementieren bearbeitbarer Tabellenfunktionen

Layui ist ein klassisches und einfaches Front-End-UI-Framework mit umfangreichen Komponenten und leistungsstarken Funktionen. Während des Entwicklungsprozesses mit Layui müssen wir möglicherweise bearbeitbare Tabellenfunktionen implementieren. In diesem Artikel wird erläutert, wie Sie die Tabellen- und Formularkomponente von Layui verwenden, um bearbeitbare Tabellenfunktionen zu implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Stellen Sie die Layui-Bibliothek vor.

Führen Sie zunächst die relevanten Dateien der Layui-Bibliothek in das Projekt ein. Sie können den Quellcode direkt herunterladen oder den CDN-Link von Layui verwenden.

<!-- 引入Layui库 -->
<link rel="stylesheet" href="http://cdn.layui.com/layui/2.5.4/layui.css">
<script src="http://cdn.layui.com/layui/2.5.4/layui.js"></script>

2. Erstellen Sie eine bearbeitbare Tabelle

Erstellen Sie ein Tabellenelement in HTML und weisen Sie ihm eine ID zu. Hier verwenden wir „demoTable“.

<table class="layui-table" id="demoTable"></table>

3. Rendern Sie die Tabelle

Rendern Sie die Tabelle in JavaScript mit der Funktion table.render von Layui und definieren Sie den Tabellenkopf und die Daten.

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头
  var cols = [[
    {field: 'name', title: '姓名', edit: 'text'},
    {field: 'gender', title: '性别', edit: 'text'},
    {field: 'age', title: '年龄', edit: 'text'},
    {field: 'email', title: '邮箱', edit: 'text'},
    {field: 'phone', title: '电话', edit: 'text'}
  ]];
  
  //定义数据
  var data = [
    {name: '张三', gender: '男', age: '22', email: 'zhangsan@example.com', phone: '123456789'},
    {name: '李四', gender: '女', age: '25', email: 'lisi@example.com', phone: '987654321'},
    {name: '王五', gender: '男', age: '28', email: 'wangwu@example.com', phone: '456789123'},
  ];
  
  //渲染表格
  table.render({
    elem: '#demoTable',
    cols: cols,
    data: data,
    toolbar: 'default',
    editMode: 'single' //可编辑模式，支持：single单行、row整行、cell单元格
  });
});
</script>

Im obigen Code rendern wir die Tabelle über die Funktion table.render. Unter diesen gibt elem die ID des Tabellenelements an, cols definiert den Header, data definiert die Daten der Tabelle, die Symbolleiste wird zum Anzeigen der Standardsymbolleiste verwendet und editMode gibt den Bearbeitungsmodus als einzeilige Bearbeitung an.

4. Überwachen der Zellbearbeitung

Um die Bearbeitungsfunktion der Zelle zu implementieren, müssen wir das Bearbeitungsereignis der Zelle abhören, den neuen Wert im Ereignis erhalten und ihn entsprechend verarbeiten. In JavaScript kann dies durch die Funktion table.on von Layui erreicht werden.

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头和数据
  //...
  
  //渲染表格
  //...
  
  //监听单元格编辑
  table.on('edit(demoTable)', function(obj){
    var value = obj.value; //得到修改后的值
    var field = obj.field; //得到字段名
    var data = obj.data; //得到当前行数据
    
    //在这里进行相应的处理，比如发送请求保存到后端数据库等
    
    layer.msg('修改成功');
  });
});
</script>

Im obigen Code hören wir das Zellbearbeitungsereignis der demoTable-Tabelle über die Funktion table.on. Der geänderte Wert, der Feldname und die aktuellen Zeilendaten können über den Parameter obj abgerufen werden. Hier können wir die Daten verarbeiten, z. B. Anfragen zum Speichern an die Back-End-Datenbank senden usw.

Durch die oben genannten Schritte können wir die bearbeitbare Tabellenfunktion mit Layui realisieren. Wenn der Benutzer die Daten in der Tabelle ändert, wird das Zellenbearbeitungsereignis ausgelöst und die Daten können verarbeitet werden.

Zusammenfassung:

Layui ist ein einfaches und leistungsstarkes Front-End-UI-Framework, das außerdem eine Fülle von Komponenten und Funktionen zur Implementierung bearbeitbarer Tabellenfunktionen bereitstellt. Durch die Verwendung der Tabellenkomponente und Formularkomponente von Layui können wir bearbeitbare Tabellenfunktionen einfach implementieren. In diesem Artikel wird beschrieben, wie Sie eine bearbeitbare Tabelle erstellen, die Tabelle rendern, Zellbearbeitungsereignisse abhören und spezifische Codebeispiele bereitstellen. Ich hoffe, dass es für alle hilfreich sein wird, die bearbeitbare Tabellenfunktion zu realisieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie bearbeitbare Tabellenfunktionen mit Layui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!