LayuiAdmin+TP5.1 数据表格添加数据详解

前端不行的 初出茅庐的后端在LayuiAdmin面前，根本是寸步难行，接下来给你讲解 ： 数据表格添加按钮，添加数据：

1.数据表格上面写 添加按钮：

<button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>  //添加按钮
  <table id="type" lay-filter="template-filter" ></table>    //数据表格table
　　


  <script type="text/html" id="table-useradmin-webuser">　　　　　　　　//数据表格中的 编辑删除按钮
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>

2.

{block name="js"}   这个是继承的基础模板的js 进行重写
<script src="__layuiadmin__/layui/layui.js" charset="utf-8"></script>  // 1. 引入静态文件
<script>
    layui.use('table', function(){              //大方法2. 
        var $ = layui.$　　　　　　　　　　　　　　//必写 3.
        
    var table = layui.table;     　　　　　　　　　　　　//4. 个是数据表格 ，  
        table.render({
            elem: '#type'
            ,url: "{:url('type/table')}"//数据接口
            ,page: true //开启分页
            ,limit:10
            ,cols: [[ 
            {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
            ,{field: 'name', title: '类名',align: 'center', minWidth:80}
            ,{field: 'status', title: '状态', minWidth:80, align: 'center',templet: '#status-tpl'}
            ,{ title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-webuser' }  //绑定上面的编辑删除按钮 
        ]]
    });

    // 事件                就是添加的事件
    var active = {　　　　　　　　　　　　　　　　　　　　　　
            add: function () {　　　　　　　　　　　　　　　　　　　　　　　　　　//6.就是运行这个 add的方法 
            parent.layer.open({　　　　　　　　　　　　　　　　　　　　　　　　
                type: 2　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
                , title: '添加模板'　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//填入信息
                , content: '{:url("add")}'　　　　　 　　　　　　　　　　　　　　　　　　//URL绑定
                , maxmin: true
                // width: 504px; height: 424px; 
                , area: ['504px', '424px']　　　　　　　　　　　　　　　　　　　　　　　　//弹窗大小
                , btn: ['确定', '取消']　　　　　　　　　　　　　　　　　　
                , yes: function (index, layero) {
                    var iframeWindow = parent.window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-front-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);
                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        // field 表单数据
                        var field = data.field;　　
                        console.log(field)　　　　　　　　　　　　　　　　//表单数据打印
                        $.ajax({　　　　　　　　　　　　　　　　　　　　//交互传值
                            url: '{:url("add")}',　　　　　　　　　　　　//传地址
                            type: 'post',　　　　　　　　　　　　　　　　　　//传的方式
                            data: field,　　　　　　　　　　　　　　
                            success: res => {　　　　　　　　　　
                                console.log(res)　　　　　　　　　　　　　　//收到后台返回的数据  是否添加成功
                                layer.msg(res.msg, {
                                    time: 1500　　　　　　　　
                                })
                                if (res.code == 0) {　　　　　　　　　　　　　　//数据刷新表单
                                    table.reload('type'); 　　　　　　　　　　　　　　　
                                }
                            }
                        });
                        parent.layer.close(index); //关闭弹层
                    });

                    submit.trigger('click');
                }
            });
        }
    };

    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {    //5. 必写方法，绑定按钮的class，点击即运行这个方法，
        var type = $(this).data('type');　　　　　　　　　　　　　　　　　　　　　　//获取按钮中的 data-type,也就是 "add"
        active[type] ? active[type].call(this) : '';　　　　　　　　　　　　　　　　//获取到"add"之后 运行add方法
    });


});



</script>
{/block}

3.后台方法这么写：

public function add()
    {   
        if (request()->isPost()) {　　　　　　//是否收到POST传参
            $data = input('post.');　　　　　　　　　　//接收所有的POST值
            return json(['code' => 0, 'msg' => '成功']);　　　　//成功的话 返回成功数据
            // return json(['code' => 1, 'msg' => '成功失败']);
        } else {
            return view();　　　　　　　　　　//没收到传参就是添加弹窗  
        }
        
    }