layui 即点即改

前端

<script type="text/html" id="buttonTpl">
    {{#  if(d.goods_is == 1){ }}
    <button class="layui-btn layui-btn-xs" lay-event="show">正常</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="show">拉黑</button>
    {{#  } }}
</script>

 

表格中绑定id

 

        table.render({
            elem: '#test'
            ,url:'http://www.exam1905a.com/goods/create?token='+token
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'goods_id', title:'ID', width:100, fixed: 'left', unresize: true, sort: true}
                ,{field:'goods_name', title:'商品名称', width:120, edit: 'text'}
                ,{field:'goods_price', title:'商品价格', width:120, edit: 'text'}
                ,{field:'file', title:'图片', width:150, templet: function(res){
                        return '<img src="'+res.file+'">'
                    }}
                                                                                 //就是这里绑定id
                ,{field: 'goods_is', title: '用户状态', width:120, align:'center',templet:'#buttonTpl'},
                ,{field:'name', title:'分类', width:100}
                ,{field:'create_time', title:'加入时间', width:120}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,limit:8
            ,limits:[5,10,15,20]
            ,id:"testReload"
        });

 

//监听行工具事件

 table.on('tool(test)', function(obj){
            var data = obj.data;
            var layEvent = obj.event, 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);
                });
                //绑定了 lay-event="show"
            }else if(layEvent==='show'){
                var is_show = data.goods_is==1?0:1;
                var msg =  data.goods_is==1?'确定要拉黑此文章？':'确定推荐此文章？';
                $.ajax({
                    url: "up?token="+token,
                    type: "post",
                    data:{id:data.goods_id,goods_is:is_show},
                    success:function (res) {
                        if (res.code==0){
                            table.reload('testReload')
                        }
                    }
                })
            }
        });

 

后端

    /**
     * 保存更新的资源
     *
     * @param  \think\Request  $request
     * @param  int  $id
     * @return \think\Response
     */
    public function update(Request $request, $id)
    {
        $id = input('id');
        $goods_is = input('goods_is');
        $res = \app\test\model\Goods::where('goods_id',$id)->update(['goods_is'=>$goods_is]);
        if ($res){
            return  json(['code'=>0,'msg'=>'成功','data'=>$res]);
        }
    }