Layui table 增加多条件查询表单

最新推荐文章于 2024-07-18 17:27:51 发布

等一场春雨

最新推荐文章于 2024-07-18 17:27:51 发布

阅读量1.4k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/WithCYwind/article/details/102649454

版权

layui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/layout"
      class="no-js fixed-layout">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>资讯列表</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        .layui-input {
            width: 100px;
        }

        .layui-form-select dl {
            min-width: 100px;
        }

        .layui-row * {
            float: left;
            text-align: center;
        }
    </style>
</head>
<body class="layui-layout-body">
<div layout:fragment="content">
    <table class="layui-hide" id="news_table" lay-filter="news_table"></table>
    <script type="text/html" id="operating1">
        <!--<div class="layui-btn-container">-->
        <!--<button class="layui-btn layui-btn-sm" lay-event="data_select">查询</button>-->
        <!--</div>-->
        <form class="layui-form" action="" lay-filter="editForm">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-left:-30px;width: 190px">
                    <label class="layui-form-label">类型1</label>
                    <div class="layui-input-inline" style="width: 100px">
                        <select name="typeSelect" lay-filter="type_select" id="type_select">
                            <option value="1">充值</option>
                            <option value="2">提现</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left:-30px;width: 190px">
                    <label class="layui-form-label">类型2</label>
                    <div class="layui-input-inline" style="width: 100px">
                        <select name="paySelect" lay-filter="pay_select" id="pay_select">
                            <option value="1">微信</option>
                            <option value="2">支付宝</option>
                            <option value="3">银联</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left:-30px;width: 300px">
                    <label class="layui-form-label">日期</label>
                    <div class="layui-input-inline">
                        <input type="input" class="layui-input" id="dateinput" name="dateinput" style="width: 300px">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left:130px;">
                    <div class="layui-input-inline">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="editFormBtn">查询</button>
                    </div>
                </div>
            </div>
        </form>
    </script>

    <script type="text/ht ml" id="operating2">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<div layout:fragment="script">
    <script>
        layui.use(['table', 'jquery', 'layer', 'form', 'util', 'laydate'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let util = layui.util;
            let laydate = layui.laydate;
            let form = layui.form;

            $(function () {
                loadTable(table, null);
                //时间选择
                laydate.render({
                    elem: '#dateinput'
                    , type: 'datetime'
                    , range: true
                });
                form.render();
                form.on("submit(editFormBtn)", function (data) {
                    loadTable(table, data);
                    return false;
                });

            });

            function loadTable(table, data) {
                table.render({
                    elem: '#news_table',
                    url: 'api/get_user_orders',
                    where: {
                        "typeSelect": data==null?"":data.field.typeSelect,
                        "paySelect": data==null?"":data.field.paySelect,
                        "dateinput": data==null?"":data.field.dateinput
                    },
                    method: 'post',
                    defaultToolbar: ['exports'],
                    toolbar: '#operating1',
                    title: '',
                    cols: [
                        [
                            {type: 'checkbox', fixed: 'left'}
                            , {field: 'imuid', title: '用户id', width: 180, fixed: 'left', unresize: true, sort: true}
                            , {field: 'uid', title: "聊天id", width: 180, fixed: "text"}
                            , {field: 'imuname', title: "聊天用户名", width: 180, fixed: "text"}
                            , {field: 'amount', title: "金额(元)", width: 100, fixed: "text"}
                            , {field: 'type', title: "金额类型", width: 100, fixed: "text"}
                            , {
                            field: 'types', title: "类型", width: 80, fixed: "text", templet: function (d) {
                                if (d.types == 1) {
                                    return "微信";
                                } else if (d.types == 2) {
                                    return "支付宝";
                                } else if (d.types == 3) {
                                    return "银联";
                                } else {
                                    return "";
                                }
                            }
                        }, {
                            field: 'times', title: "时间", width: 250, fixed: "text", templet: function (d) {
                                return util.toDateString(d.times, 'yyyy年MM月dd日 HH点mm分ss秒');
                            }
                        }
                        ]
                    ]
                    ,
                    page: true
                    ,
                    parseData: function (res) {
                        laydate.render({
                            elem: '#dateinput'
                            , type: 'datetime'
                            , range: true
                        });

                        form.val("editForm",{
                            "typeSelect":res.data.t.paramTypeSelect1=="充值"?"1":res.data.t.paramTypeSelect1=="提现"?"2":"",
                            "paySelect":res.data.t.paramTypeSelect2,
                            "dateinput":res.data.t.paramDate
                        });
                        return {
                            "code": res.code
                            , "msg": res.msg
                            , "count": res.data.count
                            , "data": res.data.rows
                        }; //解析数据列表
                    }
                });
            }
        });
    </script>

</div>
</body>
</html>

等一场春雨

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Layui table 增加多条件查询表单

<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/layout" class="no-js fixed-layout"><head> <meta charset="utf-8"&...
复制链接

扫一扫