[PHP知识库]layui修改状态

使用php结合layui完成修改状态

我本人使用的是php
tp框架
引入layui
然后设置状态那个按钮

<script type="text/html" id="buttonTpl">
    {{#  if(d.goods_status == 1){ }}
    <button class="layui-btn layui-btn-xs" lay-event="change">已审核</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="change">未审核</button>
    {{#  } }}
</script>

然后在展示是时候字段绑定到这个上面

,{field: 'goods_status', title: '审核状态', width: 120, align: 'center', templet: '#buttonTpl'}

因为我也不会官方的 所以只能使用自己的奔方法 仅供参考 因为并不是好方法
我是获取本行的id 然后去修改这个id的状态 然后去重载表格

<script>
var data = obj.data;
var layEvent = obj.event
if (layEvent === 'change') {
    $.ajax({
         url: '',
         type: "post",
         dataType: 'JSON',
         data: {id: data.id},
         success: function (res) {
             if (res.code == 200) {
                 table.reload('tableId', {});
             } else {
                 console.log(res);
             }
         },
     })
 }
</script>

控制器代码：

$id = input('id');
$res = \app\api\model\Goods::where('id', $id)->find();
if ($res['goods_status'] == 1) {
    $res['goods_status'] = 2;
    $data = [
        'goods_status' => $res['goods_status'],
        'id' => $id
    ];
    $status = \app\api\model\Goods::update($data);
} else {
    $res['goods_status'] = 1;
    $data = [
        'goods_status' => $res['goods_status'],
        'id' => $id
    ];
    $status = \app\api\model\Goods::update($data);
}
return json(['code' => 200, 'message' => '成功', 'data' => $res]);

下面放上全部的页面：

<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="buttonTpl">
    {{#  if(d.goods_status == 1){ }}
    <button class="layui-btn layui-btn-xs" lay-event="change">已审核</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="change">未审核</button>
    {{#  } }}
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="__STATIC__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: ''
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: []
            , title: ''
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'goods_status', title: '审核状态', width: 120, align: 'center', templet: '#buttonTpl'}
                , {
                    field: 'goods_image', title: '商品图片', width: 120, templet: function (res) {
                        return "<img src='" + res.goods_image + "'>"
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
            , limit: 5
            , limits: [2, 4, 6]
            , id: 'tableId'
        });
        //搜索
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('tableId', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        word: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }

            var layEvent = obj.event
            if (layEvent === 'change') {
                $.ajax({
                    url: '',
                    type: "post",
                    dataType: 'JSON',
                    data: {id: data.id},
                    success: function (res) {
                        if (res.code == 200) {
                            table.reload('tableId', {});
                        } else {
                            console.log(res);
                        }
                    },
                })
            }
        });

    });
</script>