2020-06-10 TP5.1列表页无刷新更新状态（是/否）

1、效果

image.png

2、步骤

（1）后台方法

    //无刷新ajax更新房源状态
    public function changeIsshowAjax()
    {
        if (request()->isAjax()) {
            $db = db("office")->find(input("post.id"));
            $db['status'] = ($db['status'] xor 1);
            db("office")->update($db);
            return $db['status'];
        } else {
            $this->redirect("index");
        }
    }

（2）前台html

<td>
                {if $vo.status==1}
                <button type="button" class="layui-btn layui-btn-sm layui-btn-success">在租</button>
                {else/}
                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">已租</button>
                {/if}                           
            </td>

image.png

（3）引入jq

<script src="__ADMIN__/js/jquery.min.js"></script>

（4）前台js

<script>
// 无刷新更改房源在租/已租状态
$(document).on('click', '.layui-btn-sm', function(event) {
    var $tr = $(this).parents("tr");
    var id = $tr.find("td:eq(0)").html();
    $.ajax({
        url: '{:url("changeIsshowAjax")}',
        type: 'post',
        data: {id: id}
    })
    .done(function(data) {
        if (data) {
            $tr.find("td:eq(8)").html('<button type="button" class="layui-btn layui-btn-sm layui-btn-success">在租</button>');
        } else {
            $tr.find("td:eq(8)").html('<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">已租</button>');
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    /* Act on the event */
});
</script>

讲解：

image.png