layui的table使用

時間 2020-08-22

標籤 layui table 使用简体版

原文原文鏈接

很少bb，直接上代碼css

html的代碼：html

<link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="../../static/layui/layui.js"></script>
    <script src="../../static/js/jquery.js"></script>
<table class="layui-hide" id="test" lay-filter="table"></table>

<script type="text/html" id="barDemo">
    <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>
<!--<a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="edit">&#xe642;</a>-->
<!--<a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="del">&#xe640;</a>-->
</script>js的代碼：

layui.use(['form','layer','table','upload'],function () {
    var table = layui.table,
        layer = layui.layer;
    table.render({
        elem:"#test",
        url:"../json/data.json",
        cellMinWidth:80,
        cols:[[
            {type:'numbers'},
            {field:'id',title:'id'},
            {field:'userName',title:'用戶名'},
            {field:'password',title:'密碼'},
            {field:'nickName',title:'暱稱'},
            {field:'phone',title:'電話號碼'},
            {fixed: 'right',title: '操做', width:180, align:'center', toolbar: '#barDemo'}  //綁定tpl表達式
        ]],
        page:true,//開啓分頁
        id:'testReload' //這個id挺重要的  你對table作操做時候須要使用到  好比reload的時候
    });

    table.on('tool(table)',function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
        var data = obj.data; //得到當前行數據
        var layEvent = obj.event; //得到 lay-event 對應的值（也能夠是表頭的 event 參數對應的值）
        var tr = obj.tr; //得到當前行 tr 的DOM對象

        if (layEvent === 'del'){
            layer.confirm('真的刪除行麼', function(index){
                obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
                layer.close(index);
                //向服務端發送刪除指令
            });
        }else if(layEvent === 'edit'){
            layer.msg("我要編輯你了，怕不怕啊");
        }
    });
});

還有json文件：jquery

{
  "code":0,
  "msg":"崩壞三好好玩",
  "count":3,
  "data":[
    {"id":1,"userName":"黃楠楠","password":"111","nickName":"楠佬","phone":"18162775609"},
    {"id":2,"userName":"齊浩宇","password":"111","nickName":"齊佬","phone":"18162775609"},
    {"id":3,"userName":"祁劍雄","password":"111","nickName":"熊佬","phone":"18162775609"}
    ]
}

最後的出來的效果：json

今天就先到這裏把，等這個星期雙休的時候，再研究下。緩存

layui的靜態表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/layui/layui.js"></script>
    <script src="../../static/js/jquery.js"></script>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<div style="width:1000px">
    <table class="layui-table" lay-even="" lay-skin="nob">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>人物</th>
                <th>民族</th>
                <th>出場時間</th>
                <th>格言</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>賢心</td>
                <td>漢族</td>
                <td>1989-10-14</td>
                <td>人生似修行</td>
            </tr>
            <tr>
                <td>張愛玲</td>
                <td>漢族</td>
                <td>1920-09-30</td>
                <td>於千萬人之中碰見你所碰見的人，於千萬年之中，時間的無涯的荒野裏…</td>
            </tr>
            <tr>
                <td>Helen Keller</td>
                <td>拉丁美裔</td>
                <td>1880-06-27</td>
                <td> Life is either a daring adventure or nothing.</td>
            </tr>
            <tr>
                <td>岳飛</td>
                <td>漢族</td>
                <td>1103-北宋崇寧二年</td>
                <td>教科書再濫改，也抹不去「民族英雄」的事實</td>
            </tr>
            <tr>
                <td>孟子</td>
                <td>華夏族（漢族）</td>
                <td>公元前-372年</td>
                <td>猿強，則國強。國強，則猿更強！ </td>
            </tr>
            </tbody>
        </table>
    </table>
</div>
<script>
    var table = layui.table;
</script>
</body>
</html>

1. layui-table使用總結
2. layui table中使用checkbox
3. layui table
4. layui table 的一些用法
5. 使用layui 渲染table數據表格
6. Layui使用table展現數據
7. layui-table莫名其妙出現layui-table-hover的問題
8. layui table reload 重載
9. layui的使用
10. layui動態表格 layui-table-col-special
更多相關文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。