layui Table自定义工具栏和搜索参数

2024-06-12前端开发
112

layui Table自定义工具栏和搜索参数,先看实现效果:

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;
        };
    });
})

The End
layui

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112

layui.open属性打开一个弹出层
核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类 类型:Number,默认:0 layer提供了5...
2025-02-25 前端开发
82