Heim > Web-Frontend > Layui-Tutorial > Mehrere Tipps zur Verwendung von Laui-Datentabellen

Mehrere Tipps zur Verwendung von Laui-Datentabellen

Freigeben: 2019-11-23 14:38:22
nach vorne
5800 Leute haben es durchsucht

Die Verwendung von Tabellenkomponenten kann die Entwicklungseffizienz erheblich verbessern. Zu den gängigen Datentabellenkomponenten gehören derzeit Bootstrap-Tabelle, Laui-Tabelle, EasyUI-Tabelle usw. In diesem Tutorial wird die Verwendung des Laui-Frameworks zum Einrichten von Datentabellen empfohlen.

Mehrere Tipps zur Verwendung von Laui-Datentabellen

Empfohlen: Layui-Framework-Schnellstart
Drei anfängliche Rendering-Methoden

I Let's Beginnen Sie mit der einfachsten Initialisierungsform. Wenn ich den gesamten Code direkt poste, wird Ihnen möglicherweise schwindelig durch Java-Hintergrund

1

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>

Nach dem Login kopieren

2. Automatische Rendering-Methode (Der folgende Code wird vom Beamten bereitgestellt. Die automatische Rendering-Methode eignet sich für komplexe Zeilenköpfe. Es wird allgemein empfohlen, die obige Methode zum Rendern zu verwenden)Mehrere Tipps zur Verwendung von Laui-Datentabellen

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

var table = layui.table

            ,form = layui.form;

    layui.use(&#39;table&#39;, function () {  // 引入 table模块

        table.render({

            id:"dataTable",//

            elem: &#39;#layui_table_id&#39;,//指定表格元素

            url: &#39;/menu/menuList.ajax&#39;,  //请求路径

            cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

            ,skin: &#39;line &#39; //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)

           //,even: true    //隔行换色

            ,page: true  //开启分页

            ,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。

            ,limit: 10 //每页默认显示的数量

            ,method:&#39;post&#39;  //提交方式

           ,cols: [[

                {type:&#39;checkbox&#39;}, //开启多选框

                {

                    field: &#39;menuId&#39;, //json对应的key

                    title: &#39;ID&#39;,   //列名

                    sort: true   // 默认为 false,true为开启排序

                }

            ]]

        });

    });

Nach dem Login kopieren

Zweitens, wie man eine Bearbeitungsschaltfläche hinzufügt

1

2

3

4

5

6

{

code: 0,

count: 8,  //总行数

data: [,…], //表格数据

msg: ""

}

Nach dem Login kopieren
rrree

Drei, wie man eine Formularkomponente zur Tabelle hinzufügt ( Ich werde 2 unten empfehlen)

1 Verwenden Sie die Modul-Engine-Methode (diese Methode ist problematischer, ich persönlich empfehle die zweite). Funktionsmethode

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<table class="layui-table" lay-data="{height:315, url:&#39;/demo/table/user/&#39;, page:true, id:&#39;test&#39;}" lay-filter="test">

  <thead>

    <tr>

      <th lay-data="{field:&#39;id&#39;, width:80, sort: true}">ID</th>

      <th lay-data="{field:&#39;username&#39;, width:80}">用户名</th>

      <th lay-data="{field:&#39;sex&#39;, width:80, sort: true}">性别</th>

      <th lay-data="{field:&#39;city&#39;}">城市</th>

      <th lay-data="{field:&#39;sign&#39;}">签名</th>

      <th lay-data="{field:&#39;experience&#39;, sort: true}">积分</th>

      <th lay-data="{field:&#39;score&#39;, sort: true}">评分</th>

      <th lay-data="{field:&#39;classify&#39;}">职业</th>

      <th lay-data="{field:&#39;wealth&#39;, sort: true}">财富</th>

    </tr>

  </thead>

</table>

Nach dem Login kopieren
4. Bilder anzeigen

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

var table = layui.table

            ,form = layui.form;

    layui.use(&#39;table&#39;, function () {  // 引入 table模块

        table.render({

            id:"dataTable",//

            elem: &#39;#layui_table_id&#39;,//指定表格元素

            url: &#39;/menu/menuList.ajax&#39;,  //请求路径

            cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

            ,skin: &#39;line &#39; //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)

           //,even: true    //隔行换色

            ,page: true  //开启分页

            ,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。

            ,limit: 10 //每页默认显示的数量

            ,method:&#39;post&#39;  //提交方式

,done: function(res, curr, count) { //表格数据加载完后的事件

    //调用示例

    layer.photos({//点击图片弹出

        photos: &#39;.layer-photos-demo&#39;

        ,anim: 1 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)

    });

    //如果是异步请求数据方式,res即为你接口返回的信息。

    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度

    console.log(res);

 

    //得到当前页码

    console.log(curr);

 

    //得到数据总量

    console.log(count);

}

    ,cols: [[ {type:&#39;checkbox&#39;}, //开启多选框  { field: &#39;menuId&#39;, //json对应的key title: &#39;ID&#39;, //列名 sort: true // 默认为 false,true为开启排序  },{ fixed: &#39;right&#39;, title: &#39;操作&#39;, width: 215, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39; //绑定按钮组 } ]] }); });

//监听工具条

table.on(&#39;tool(dataTable)&#39;, function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"

    var data = obj.data //获得当前行数据

            ,layEvent = obj.event; //获得 lay-event 对应的值

    if(layEvent === &#39;detail&#39;){

     layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串

        layer.msg(data.attrId);

    } else if(layEvent === &#39;del&#39;){

        layer.msg(&#39;删除&#39;+data.menuId);

        console.log(table)

    } else if(layEvent === &#39;edit&#39;){

        

    });

    }

});

Nach dem Login kopieren

Attribute binden, nachdem die Tabellendaten geladen wurden

Vollständig Code: https://gitee.com/gezi441/layui-table

Das obige ist der detaillierte Inhalt vonMehrere Tipps zur Verwendung von Laui-Datentabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
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