2014年1月6日 12:51:15
情景:
发现博客园的后台管理中,在某个列表页里删除某个列表项的时候,用ajax删除,本页不刷新,只是高亮显示那个已删除的项,不再来回跳转并刷新页面了
感觉这样减轻了程序的编码量和复杂度,而且,让管理员很明了,减少了管理员等待页面刷新的时间,就用到了项目中(之前有段时间发现百度音乐的列表页也是类似的效果)
注意:
1.需要jquery,在用ajax删除记录的地方用到了,其它的都是原生js
2.由于原生js的confirm框因为样式等原因被重写了,返回值不是true/false,因此这里用一个div来代替confirm确认框
1 <div> 2 <table> 3 <tr> 4 <th>标题</th> 5 <th>操作</th> 6 <th></th> 7 </tr> 8 <{foreach from=$listNews item=news}> 9 <tr id="item_<{$news.id}>"> 10 <td><{$news.title}></td> 11 <td id="item_op_<{$news.id}>"> 12 <a href="javascript:;" onclick="del(<{$news.id}>);">删除</a> 13 </td> 14 <td> 15 <span id="del_confirm_<{$news.id}>" style="display:none"> 16 <a href="javascript:;" onclick="delConfirm('<{$controllerUrl}>/ajaxdelnews', <{$news.id}>, <{$aid}>)">确定删除</a> 17 <a href="javascript:;" onclick="delCancle(<{$news.id}>)">取消删除</a> 18 </span> 19 </td> 20 </tr> 21 <{/foreach}> 22 </table> 23 注:默认按照添加时间倒排,删除的条目在刷新后从列表中消失,不再频繁刷新网页 24 </div> 25 <script type="text/javascript"> 26 function del(itemid) 27 { 28 var spanDelConfirm = document.getElementById('del_confirm_'+itemid); 29 spanDelConfirm.style.display='block'; 30 spanDelConfirm.style.background='#FFAA00'; 31 } 32 33 function delConfirm(url, itemid, areaid) 34 { 35 var jsonNewsInfo = {id:itemid,aid:areaid}; 36 var flag = $.post(url, jsonNewsInfo); 37 flag.done( 38 function (data) { 39 if (data == 'true') { 40 document.getElementById('item_op_'+itemid).innerHTML='已删除'; 41 document.getElementById('del_confirm_'+itemid).innerHTML=''; 42 document.getElementById('item_'+itemid).style.background='#FFAA00'; 43 }; 44 } 45 ); 46 } 47 48 function delCancle(itemid) 49 { 50 document.getElementById('del_confirm_'+itemid).style.display='none'; 51 } 52 </script>
删除前
删除确认
删除后
