formSelects 多选样式和获取值

最新推荐文章于 2025-04-09 15:44:40 发布

梦到韩大厨

最新推荐文章于 2025-04-09 15:44:40 发布

阅读量1.2k

点赞数

分类专栏： layui js 文章标签： javascript jquery html

本文链接：https://blog.youkuaiyun.com/x007008009/article/details/120738678

版权

layui 同时被 2 个专栏收录

12 篇文章

订阅专栏

12 篇文章

订阅专栏

本文介绍了使用layui框架进行前端开发的过程，包括引入必要的CSS和JS文件，展示了一个包含公司名称选择和月份输入的搜索表单，以及使用layui的表单、表格和日期插件。在JavaScript部分，实现了搜索功能，通过表单数据筛选结果并加载到表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

![在这里插入图片描述](https://img-blog.csdnimg.cn/aa91100ff6e548b8a029ac2e93e937c8.png
先引入需要的js css

如果没有 formSelects-v4.css 这个引入样式无法出来这个应该很好下载实在找不到再来找我

HTML代码

    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md2">
                <div class="layui-form-item" class="col-sm-2">
                    <label class="layui-form-label">公司名称</label>
                    <div class="layui-input-block">

                        <select name="companys" xm-select="select1" id="companys">
                            {foreach $list as $vo}
                            <option value=" {$vo.id}"> {$vo.shortCompanyName}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-form-item" class="col-sm-2">
                    <label class="layui-form-label">月份</label>
                    <div class="layui-input-block">

                        <input type="text" class="layui-input" name="month" id="test1">
                    </div>
                </div>

            </div>
            <div class="layui-col-md3">
                <button class="layui-btn" id="sousuo">搜索</button>
            </div>
        </div>
    </div>

js代码

       //全局定义一次, 加载formSelects
            layui.config({
                base: '/newLayui/' //此处路径请自行处理, 可以使用绝对路径
            }).extend({
                formSelects: 'formSelects-v4'
            });

            layui.use(['layer', 'form', 'table', 'formSelects', 'laydate'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    table = layui.table,
                    formSelects = layui.formSelects,
                    laydate = layui.laydate;


                // var index = layer.load(1); 
                var loading = layer.load(0, {
                    shade: false,
                });

                laydate.render({
                    elem: '#test1', //指定元素
                    type: 'month'
                });


                //第一个实例
                table.render({
                    elem: '#demo',
                    limit: 20,
                    size: 'lg',
                    method: 'POST',
                    url: '/***************', //数据接口
                    page: true, //开启分页
                    where: {

                    },
                    totalRow: true,
                    toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                    limits: [20, 40, 60, 80, 100],
                    limit: 20,
                    cols: [
                        [ //表头 第一行
                            // { type: 'checkbox', fixed: 'left',rowspan: 2, },
                            {
                                field: 'id',
                                title: 'ID',
                                align: 'center',
                                rowspan: 2,
                                // style: 'background-color: #5FB878; color: #fff',
                                totalRowText: "合计"
                            },
                            此处省略***********
                        ]
                    ],
                    id: 'testReload',
                    parseData: function (res) { //res 即为原始返回的数据
                        // console.log(res.data)
                    }, done: function (res) {   //返回数据执行回调函数
                        layer.close(loading);    //返回数据关闭loading
                    }
                });
                //筛选条件
                var $ = layui.$,
                    active = {
                        reload: function () {
                        	//获取多选
                            var companys = formSelects.value('select1', 'valStr'); 
                    
                            //  console.log($('#start').val())
                            table.reload('testReload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                },
                                where: {
                                
                                },

                            });
                        }
                    };
                // 监听搜索按钮
                $("#sousuo").on('click', function () {
                    var type = 'reload';
                    active[type] ? active[type].call(this) : '';
                });

    

      

            })

在这里插入图片描述

参考链接