列表页条目不刷新删除

2014年1月6日 12:51:15

情景:

发现博客园的后台管理中,在某个列表页里删除某个列表项的时候,用ajax删除,本页不刷新,只是高亮显示那个已删除的项,不再来回跳转并刷新页面了

感觉这样减轻了程序的编码量和复杂度,而且,让管理员很明了,减少了管理员等待页面刷新的时间,就用到了项目中(之前有段时间发现百度音乐的列表页也是类似的效果)

注意:

1.需要jquery,在用ajax删除记录的地方用到了,其它的都是原生js

2.由于原生js的confirm框因为样式等原因被重写了,返回值不是true/false,因此这里用一个div来代替confirm确认框

 

    <div>
        <table>
            <tr>
                <th>标题</th>
                <th>操作</th>
                <th></th>
            </tr>
            <{foreach from=$listNews item=news}>
                <tr id="item_<{$news.id}>">
                    <td><{$news.title}></td>
                    <td id="item_op_<{$news.id}>">
                        <a href="javascript:;" onclick="del(<{$news.id}>);">删除</a>
                    </td>
                    <td>
                        <span id="del_confirm_<{$news.id}>" style="display:none">
                            <a href="javascript:;" onclick="delConfirm('<{$controllerUrl}>/ajaxdelnews', <{$news.id}>, <{$aid}>)">确定删除</a>
                            <a href="javascript:;" onclick="delCancle(<{$news.id}>)">取消删除</a>
                        </span>
                    </td>
                </tr>
            <{/foreach}>
        </table>
        注:默认按照添加时间倒排,删除的条目在刷新后从列表中消失,不再频繁刷新网页
    </div>
<script type="text/javascript">
    function del(itemid)
    {
        var spanDelConfirm = document.getElementById('del_confirm_'+itemid);
        spanDelConfirm.style.display='block';
        spanDelConfirm.style.background='#FFAA00';
    }
    
    function delConfirm(url, itemid, areaid)
    {
        var jsonNewsInfo = {id:itemid,aid:areaid};
        var flag = $.post(url, jsonNewsInfo);
        flag.done(
            function (data) {
                if (data == 'true') {
                    document.getElementById('item_op_'+itemid).innerHTML='已删除';
                    document.getElementById('del_confirm_'+itemid).innerHTML='';
                    document.getElementById('item_'+itemid).style.background='#FFAA00';
                };
            }
            );
    }

    function delCancle(itemid)
    {
        document.getElementById('del_confirm_'+itemid).style.display='none';
    }
</script>

 删除前

删除确认

删除后