layUI Table自定義工具欄和搜尋引數

layUI Table自定義工具欄和搜尋引數

影片講解地址 https://www.bilibili.com/video/BV1P94y197nN

HTML程式碼

<div class="container-fluid">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<style>
    .layui-input, .layui-unselect, .layui-select-title {
        height: 30px;
    }
</style>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add" style="padding:0px 3px 0px 5px">
                <i class="layui-icon">&#xe654;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="update" style="padding:0px 3px 0px 5px">
                <i class="layui-icon">&#xe642;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="delete" style="padding:0px 3px 0px 5px">
                <i class="layui-icon">&#xe640;</i>
            </button>
        </div>
 
    <div class="layui-inline ">
        <input type="text" id="orderID"  placeholder="訂單號" autocomplete="off" class="layui-input" style="height:30px;width:110px">
    </div>
    <div class="layui-inline " style="width:100px">
        <select id="orderState">
            <option value="0">所有狀態</option>
            <option value="1">已支付</option>
            <option value="2">未支付</option>
            <option value="3">已結算</option>
        </select>
    </div>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="search" style="padding:0px 3px 0px 5px">
        <i class="layui-icon">&#xe615;</i>
    </button>
</script>

JS程式碼

layui.use(['table', 'layer', 'jquery'], function () {
    var table = layui.table,
        layer = layui.layer, //彈層
        $ = layui.jquery
    if (localStorage.getItem("layuiPageSize") == null || localStorage.getItem("layuiPageSize") == 'undefined') {
        localStorage.setItem("layuiPageSize", 20);//新增每頁預設資料條數
    }
    let guid = getGUID();
    table.render({
        elem: '#test',
        url: '../api/OrderInfo/Query', //獲取資料url地址
        title: '使用者資料表',
        toolbar: '#toolbarDemo',//開啟工具欄，此處顯示預設圖示，可以自定義模板，詳見文件
        defaultToolbar: false,//表頭上面的右側工具欄去掉
        page: {
            limit: localStorage.getItem("layuiPageSize")//預設每頁多少條
            , limits: [20, 30, 50, 100, 200, 300, 500]//選擇  顯示每頁多少條
            //, first: '首頁'
            //,last: '尾頁'
        },
        where: {
            orderid: $('#orderID').val(),
            UserName: $.cookie('uName'),
            GUID: guid,
            state: $("#orderState").val()
        },
        id: 'testReload',
        cols: [
            [{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'orderid',
                title: '訂單號',
                width: 205,
                //fixed: 'left',
                //unresize: true,
                //sort: true
            }, {
                field: 'UserName',
                title: '使用者名稱',
                width: 120,
                edit: 'text'
            }, {
                field: 'money',
                title: '金額',
                width: 80,
                edit: 'text'
            }, {
                field: 'subject',
                title: '摘要',
                width: 120,
                edit: 'text'
            }, {
                field: 'body',
                title: '月數',
                width: 60
            }, {
                field: 'state',
                title: '狀態',
                    width: 75, templet: function (d) {
                        if (d.state == 1) {
                            return '已支付'
                        } else if (d.state == 2) {
                            return '未支付'
                        } else if (d.state == 3) {
                            return '已結算'
                        }
                    }
            }, {
                field: 'OrderTime',
                title: '訂單時間'
            }]
        ],
        done: function (obj, first) {
            let pageSize = $(".layui-laypage-limits").find("option:selected").val();
            localStorage.setItem("layuiPageSize", pageSize);//新增資料
        }
    });
    //監聽頭工具欄事件
    table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id)
            , data = checkStatus.data; //獲取選中的資料
        switch (obj.event) {
            case 'add':
                alert("功能沒開放");
                break;
            case 'update':
                alert("功能沒開放");
                break;
            case 'search':
                let search = $('#orderID').val();
                let state = $("#orderState").val();
                table.reload('testReload',{
                    page: {
                        curr: 1 //重新從第 1 頁開始
                    },
                    where: {
                        orderid: $('#orderID').val(),
                        UserName: $.cookie('uName'),
                        GUID: guid,
                        state: $("#orderState").val()
                    }
                });
                $('#orderID').val(search);//重載入後，重新賦值上次搜尋的內容
                $("#orderState").val(state);
                break;
            case 'delete':
                alert("功能沒開放");
                break;
        };
    });
})