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(); //没收到传参就是添加弹窗 } }