blog_tp6/view/sys/guest_book/index.html

<article class="cl pd-20" style="min-width: 900px;">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
        </span>
        <span class="r">共有数据：<strong id="total">{notempty name="list"}{$list->total()}{else/}0{/notempty}</strong>
            条</span>
    </div>
    <div id="edatalist">
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <th width="25">
                        <input type="checkbox" value="" name="">
                    </th>
                    <th style="min-width: 40px;">ID</th>
                    <th style="min-width: 80px;">名称</th>
                    <th style="min-width: 100px;">电话</th>
                    <th style="min-width: 360px;">留言内容</th>
                    <th style="min-width: 120px;">时间</th>
                    <th>标记</th>
                    <th style="min-width: 200px;">备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $list as $val}
                <tr class="text-c va-m">
                    <td>
                        <input type="checkbox" value="{$val.id}" name="checkbox[]">
                    </td>
                    <td>{$val.id}</td>
                    <td>{$val.name}</td>
                    <td>{$val.contact}</td>
                    <td class="text-l">{$val.content}</td>
                    <td>{$val.time|date="Y-m-d H:i:s"}</td>
                    <td class="td-status">
                        <a href="javascript:;" onclick="mark(this,'{$val.id}')" style="text-decoration: none;"
                            title="{$val.mark==1? '重点' : ''}">
                            <span class="f-20 c-primary"><i class="Hui-iconfont">{$val.mark==1?'&#xe601;' :
                                    '&#xe677;'}</i></span></a>
                    </td>
                    <td><input type="text" class="input-text input-remark text-l" value="{$val.remark}"
                            data-id="{$val.id}"></td>
                    <td class="td-manage">
                        <a href="javascript:;" title="删除" style="text-decoration:none" class="btn btn-danger radius"
                            onClick="del(this,'{$val.id}')">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20 ">
        <span class="r">{notempty name="list"}{$list->render()}{/notempty}</span>
    </div>
</article>

<script>
    // 改变状态
    function mark(obj, id) {
        $.post('mark', {
            'id': id
        }, function (res) {
            if (res.code == 0) {
                layer.msg(res.msg, {
                    icon: 1,
                    time: 1000
                });
                if (res.mark == 1) {
                    var img_str = '<a href="javascript:;" onclick="mark(this,' + id + ')" style="text-decoration: none;" title="重点"><span class="f-20 c-primary"><i class="Hui-iconfont">&#xe601;</i></span></a>';
                } else {
                    var img_str = '<a href="javascript:;" onclick="mark(this,' + id + ')" style="text-decoration: none;" title=""><span class="f-20 c-primary"><i class="Hui-iconfont">&#xe677;</i></span></a>';
                }
                $(obj).parents('td.td-status').append(img_str);
                $(obj).remove();
            } else {
                layer.msg(res.msg, {
                    icon: 5,
                    time: 1000
                });
                return false;
            }
        }, 'json');
    }

    // 备注
    $(".input-remark").change(function () {
        var remark = $(this).val();
        var id = $(this).data('id');

        console.log(id);
        $.post('remark', {
            'id': id,
            'remark': remark
        }, function (res) {
            if (res.code == 0) {
                layer.msg(res.msg, {
                    icon: 1,
                    time: 1000
                });
            } else {
                layer.msg(res.msg, {
                    icon: 5,
                    time: 1000
                });
                return false;
            }
        }, 'json');
    });
</script>