Heim > Web-Frontend > Layui-Tutorial > So aktualisieren Sie Laui-Tabellen automatisch

So aktualisieren Sie Laui-Tabellen automatisch

爱喝马黛茶的安东尼
Freigeben: 2019-07-11 16:49:47
Original
15776 Leute haben es durchsucht

So aktualisieren Sie Laui-Tabellen automatisch

Schritt eins: Umgebung einrichten.

1. Die Umgebung von Layui ist sehr einfach einzurichten, ähnlich wie bei der Abfrage. Es kann direkt verwendet werden, solange es importiert wird.

1.1: JS und Stile einführen

2. Wenn Sie am Tag davor und danach eine vollständige interaktive Anfrage stellen, müssen Sie eine reaktionsfähige Hintergrundumgebung erstellen. (In diesem Artikel wird nicht der Aufbau der Hintergrundumgebung vorgestellt.)

So aktualisieren Sie Laui-Tabellen automatischSo aktualisieren Sie Laui-Tabellen automatisch

Schritt 2: Laden Sie Laui herunter.

Website: https://www.layui.com/

1. Der erste Schritt besteht darin, die Laui-Download-URL zu öffnen

2 Paket von Laui

3. Abhängigkeitspakete anzeigen.

So aktualisieren Sie Laui-Tabellen automatisch

So aktualisieren Sie Laui-Tabellen automatisch

So aktualisieren Sie Laui-Tabellen automatisch

Verwandte Empfehlungen: „Layui-Framework-Tutorial

Schritt 3: Code-Implementierung.

1. Implementierung des HTML-Codeteils

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>人员数据</legend>
</fieldset>
<table class="layui-hide" id="demo" lay-filter="pManageTable"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
Nach dem Login kopieren

2. Die Schaltfläche

<script src="layui/layui.all.js" charset="utf-8"></script>
<script>
layui.config({
  version: &#39;1545041465443&#39; //为了更新 js 缓存,可忽略
});
 
layui.use([&#39;laydate&#39;, &#39;laypage&#39;, &#39;table&#39;, &#39;element&#39;], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,table = layui.table //表格
  ,element = layui.element //元素操作
  
  //默认第一次初始化调用执行一个 table 实例
  var tableIns = table.render({
    elem: &#39;#demo&#39;
    ,height: 450
    ,url:&#39;demo.json&#39; //数据接口
    ,title: &#39;用户表&#39;
    ,page: true //开启分页
    ,toolbar: &#39;default&#39; //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: &#39;checkbox&#39;, fixed: &#39;left&#39;}
      ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true, fixed: &#39;left&#39;}
      ,{field: &#39;username&#39;, title: &#39;菜品名称&#39;, width:105}
      ,{field: &#39;sex&#39;, title: &#39;菜单类别&#39;, width: 105, sort: true}
      ,{field: &#39;city&#39;, title: &#39;所属菜系&#39;, width:115, sort: true}
      ,{field: &#39;sign&#39;, title: &#39;签名&#39;, width: 80, sort: true, totalRow: true}
      ,{field: &#39;experience&#39;, title: &#39;积分&#39;, width: 85, sort: true, totalRow: true}
      ,{field: &#39;score&#39;, title: &#39;评分&#39;, width: 100}
      ,{field: &#39;classify&#39;, title: &#39;职业&#39;, width: 100}
      ,{field: &#39;wealth&#39;, title: &#39;财富&#39;, width: 100}
      ,{fixed: &#39;right&#39;, width: 165, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}
    ]]
  });
Nach dem Login kopieren

oder js wird regelmäßig aufgerufen, und die Abfrageschaltfläche ruft

  function callBack(){
  //第二次调用
 tableIns.reload({
    where: {&#39;username&#39;:"user-0"}/设定异步数据接口的额外参数,任意设
    ,page: {
      curr: 1 //重新从第 1 页开始
    }
 });
  }
  
  
});
Nach dem Login kopieren

So aktualisieren Sie Laui-Tabellen automatischSo aktualisieren Sie Laui-Tabellen automatischSo aktualisieren Sie Laui-Tabellen automatisch

Schritt 4: Testen auf.

1. Die Seitendatentabelle wird erfolgreich geöffnet und angezeigt.

2. Klicken Sie auf die Seitenzahl der Umblättertaste, um die Tabelle zu aktualisieren

3. Rufen Sie Laui auf, um die Seite zu aktualisieren.

So aktualisieren Sie Laui-Tabellen automatisch

So aktualisieren Sie Laui-Tabellen automatisch

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie Laui-Tabellen automatisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage