Jquery 实现无刷新异步删除数据并重新编号

最新推荐文章于 2022-08-21 23:45:01 发布

weixin_30444105

最新推荐文章于 2022-08-21 23:45:01 发布

阅读量158

点赞数

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/Mr-Hsy/archive/2013/05/15/3079387.html

版权

发文前我BS下某浏览器，我编辑好了发表时突然跳出让我登录，一登录之前写的也没进草稿~！害我又要重写一遍~！！！

异步删除后刷新数据，一种是发送请求重新加载数据，一种是动态的删除html元素。

我选择使用第二种，感觉这不但体验好也可以减轻服务器负担，如有不足之处、请大神指点。

jsp: 用到EL表达式，记得引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>和Jquery库 jquery-1.7.2.min.js

  <body >
        <div border="false" align="right" >
            <a id="btnAddT" class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" >添加</a>
            <a id="btnDeleteT" class="easyui-linkbutton" icon="icon-remove" href="javascript:void(0)" >删除</a>
            <a id="btnColse" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)" onclick="closeWindow('traveler')" >关闭</a>&nbsp;
            <hr/>     
      </div>
    <table class="ztable" width="98%" id="traverInfoT" >
        <tr >
                <th  >
                    <input type="checkbox" >
                </th>
                <th  >序号</th>
                <th >姓</th>
                <th >名</th>
                <th >国籍</th>
                <th >性别</th>
                <th >证件号</th>
        </tr>
    <tbody id="result">
    <c:forEach items="${travelerInfoList }" var="info" varStatus="index">
        <tr <c:if test="${index.index%2!=0 }">style="background-color:#95B8E7" </c:if>>
                <td >
                    <input type="checkbox"  value="${info.id }" />
                </td>
                <td >${index.index+1 }</td>
                <td >${info.surname }</td>
                <td >${info.given_nm }</td>
                <td >${info.nationality }</td>
                <td >${info.gender }</td>
                <td >${info.offl_td_nbr }</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
  </body>
</html>

javascript:

 $(document).ready(function(){
      $("#btnDeleteT").click(function(){
          //获取tbody区域里的所有已经选择的复选框
            var arr=$("#result input[type='checkbox']:checked");
            if(arr.length<1){ //没有选择给个提示
                alert("请选择~!");
                return false;
            }
            //提示用户是否删除
            if(!confirm("确定删除吗?"))return false;
            var ids="";
            $.each( arr, function(i, n){
                  ids+=n.value+",";//拼接ID
                });
            //异步请求操作，删除所选择的数据 
            $.ajax({
                type:"POST",
                url:"airReport/travelerInfoAction!deleteTravelerInfo.action?commonId="+ids, //请求后台删除url
                data:"time="+new Date(),
                success:function(message){
                if(message=='OK'){
                //后台删除成功后移除要选择的tr
                    $("#result input[type='checkbox']:checked").closest('tr').remove();
                //重新编排序号
                    for(var i=0;i<=$("#result tr").length;i++){
                        //获取要重新编号的对象并通过JQuery的eq 来获取单元格，具体可查JQuery API
                        $("#result tr:eq("+i+") td:eq(1)").html(i+1); 
                    }
                }else{
                    alert("对不起，出错了！");
                }
                },
                error:function(){
                    alert("对不起，出错了！");
                }
            });
      });
  });

java后台Action:

package com.airline.airlinemanage.webapp;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.config.BeanDefinition;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.travelsky.airlinemanage.model.TravelerInfo;
import com.travelsky.airlinemanage.service.TravelerInfoService;
import com.travelsky.util.Tool;
@SuppressWarnings("serial")
@Controller
@Scope(BeanDefinition.SCOPE_PROTOTYPE)
public class TravelerInfoAction extends ActionSupport {

    @Autowired
    private TravelerInfoService travelerInfoService=null;
    
    /**
     * 旅客集合
     */
    public List<TravelerInfo> travelerInfoList;
    
    /**
     * 
     */
    private String commonId;
    private HttpServletRequest request=(HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
    private HttpServletResponse response=(HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
    
    /**
     * ***************************************************Action *******************************************
     */
    
    /**
     * 获取旅客数据列表
     */
    public String showTravelerInfoList() throws Exception {
        // TODO Auto-generated method stub
        
        travelerInfoList=travelerInfoService.findTravelerInfos(Tool.convertLong(commonId), request.getParameter("type"));
         return "list";
    }

    /**
     * 删旅客
     * @throws Exception
     */
    public void deleteTravelerInfo()throws Exception{
        
        if(commonId!=null){
            //调用Service层代码执行删除，返回boolean 标识是否成功
            if(travelerInfoService.deleteTravelerInfo(commonId)){
                Tool.outJson(response, "OK"); //调用工具类输出
            }else{
                Tool.outJson(response, "ERROR");
            }
        }
    }
    /**
     * ****************************************************GET And SET**************************************
     */

    /**
     * @return the travelerInfoList
     */
    public List<TravelerInfo> getTravelerInfoList() {
        return travelerInfoList;
    }


    /**
     * @param travelerInfoList the travelerInfoList to set
     */
    public void setTravelerInfoList(List<TravelerInfo> travelerInfoList) {
        this.travelerInfoList = travelerInfoList;
    }


    /**
     * @return the commonId
     */
    public String getCommonId() {
        return commonId;
    }


    /**
     * @param commonId the commonId to set
     */
    public void setCommonId(String commonId) {
        this.commonId = commonId;
    }
    
    
    
}

附上outJson代码：

public static void outJson(HttpServletResponse response,String str){
        //防止前端从JSON中取出的数据成乱码
        response.setCharacterEncoding("UTF-8");  
        PrintWriter out=null;
       // String str="Json解析失败";
        try {
            out=response.getWriter();
            //str=JSONArray.fromObject(list).toString();
            out.print(str);
            out.flush();
            out.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
         System.out.println("JSON:>>>>>>>>>"+str);
    }

OK 上效果图：

成功后：

编程无非Copy and Update，因此我不敢保证你复制过去就可以使用，但是思路和过程是正确的，所以还是要视具体环境而异。

转载于:https://www.cnblogs.com/Mr-Hsy/archive/2013/05/15/3079387.html

weixin_30444105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 实现无刷新异步删除数据并重新编号

发文前我BS下某浏览器，我编辑好了发表时突然跳出让我登录，一登录之前写的也没进草稿~！害我又要重写一遍~！！！异步删除后刷新数据，一种是发送请求重新加载数据，一种是动态的删除html元素。我选择使用第二种，感觉这不但体验好也可以减轻服务器负担，如有不足之处、请大神指点。jsp: 用到EL表达式，记得引入<%@ taglib prefix="c" uri="http://java...
复制链接

扫一扫