EasyAdmin8-Laravel自定义穿梭框

路过的夏季

已于 2024-04-07 11:10:08 修改

阅读量467

点赞数 3

CC 4.0 BY-SA版权

文章标签： laravel java 前端 php

于 2024-04-07 11:08:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37775043/article/details/137456019

本文介绍了在使用EasyAdmin8-Laravel开发过程中，如何集成穿梭框功能以及处理CSRF令牌以确保表单提交的正确性，分享了实现步骤和注意事项。

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

近日在使用EasyAdmin8-Laravel 做管理端，用到穿梭框功能。由于该框架之前使用较少；踩了好多坑，终于完善。特此分享总结

@include('admin.layout.head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form" lay-filter="form-demo-submit">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input type="text" name="start_time" class="layui-input" lay-verify="required"
                           id="ID-laydate-type-datetime"
                           placeholder="yyyy-MM-dd HH:mm:ss" value="">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="end_time" class="layui-input" lay-verify="required"
                           id="ID-laydate-type-datetime"
                           placeholder="yyyy-MM-dd HH:mm:ss" value="">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择用户：</label>
            <div class="layui-input-block">
                <select name="seller_id" lay-filter="demo-select-filter">
                    <option value="0">请选择</option>
                    @foreach($user_list as $key => $item)
                        <option value="{{$key}}">{{$item}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择设备分组：</label>
            <div class="layui-input-block">
                <div id="ID-transfer-demo-showSearch-01"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">请选择执分类：</label>
            <div class="layui-input-block">
                <div id="ID-transfer-demo-showSearch"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="notes" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>
        <div class="hr-line"></div>


    </form>
    <div class="layui-form-item text-center">
        <button class="layui-btn layui-btn-normal layui-btn-sm" id="test-btn-submit">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
    </div>
</div>
<script type="text/javascript" charset="utf-8"
        src="http://ks.sicunxtc.com/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js?v=1712054738"></script>
<script>
    layui.use(function () {
        var laydate = layui.laydate;
        var form = layui.form;
        // 日期时间选择器
        laydate.render({
            elem: '#ID-laydate-type-datetime',
            type: 'datetime'
        });
        // 账号穿梭框
        var transfer = layui.transfer;
        var group = {!!$group!!};
        var data = {!!$transfer!!};
        // 渲染
        transfer.render({
            elem: '#ID-transfer-demo-showSearch',
            data: data,
            id: 'transfer_1', // 自定义 id 索引
            title: ['待选择分类', '已选择分类'],
            showSearch: true
        });
        transfer.render({
            elem: '#ID-transfer-demo-showSearch-01',
            data: group,
            id: 'transfer_2', // 自定义 id 索引
            title: ['待选择设备分组', '已选择设备分组'],
            showSearch: true
        });
        // 获得右侧数据
        var transfer_1 = transfer.getData('transfer_1');
        // 获得右侧数据
        var transfer_2 = transfer.getData('transfer_2');

        var layer = layui.layer;
        // 任意位置按钮触发提交
        $('#test-btn-submit').on('click', function () {
            form.submit('form-demo-submit', function (data) {
                var field = data.field; // 获取表单全部字段值
                // 获得右侧数据
                var transfer_1 = transfer.getData('transfer_1');
                // 获得右侧数据
                var transfer_2 = transfer.getData('transfer_2');

                field.transfer_1 = transfer_1;
                field.transfer_2 = transfer_2;
                console.log(data); // 回调函数返回的 data 参数和提交事件中返回的一致
                // 执行提交
                layer.confirm('确定提交吗？', function (index) {
                    layer.close(index); // 关闭确认提示框
                    // 显示填写结果，仅作演示用
                    // layer.alert(JSON.stringify(field), {
                    //     title: '当前填写的字段值'
                    // });
                    var loading = layer.msg('正在保存', {icon: 16, shade: 0.3, time: 0});
                    $.ajax({
                        method: "POST",
                        url: 'add',
                        data: field,      //提交表单的数据
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg(res.msg, {icon: 1, time: 2000}, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.location.reload(); //刷新父页面
                                    parent.layer.close(index);
                                });
                            } else {
                                layer.msg(res.stateMsg, {icon: 2});
                            }
                        },
                        error: function () {
                            layer.close(loading);
                            layer.msg('操作失败', {icon: 2});
                        }
                    });
                    return false;  //防止表单提交两次
                });
            });
            return false;
        });
    });


</script>
@include('admin.layout.foot')

其中该部分不可省略，如缺少会表单提交会报错CSRF-TOKEN 错误

<meta name="csrf-token" content="{{ csrf_token() }}">
 headers: {
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},

默认参数为json格式，前端采用该格式，否则字符串中的双引号会被转议

 var data = {!!$transfer!!};

效果如图：