删除选择功能

标签：功能 删除 ids 选择 getElementById 选中 document id

删除选中功能分析

获取选中条目id的代码实现

list.jsp：

<form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">

</form>

使用form标签将整个table包起来

 

 

  给删除选中按钮绑定单击事件：

window.onload = function () {
//给删除选中绑定单击事件
document.getElementById("delSelected").onclick = function () {
document.getElementById("form").submit();
}
}

删除选中的代码实现

UserService接口：

  /**
     * 批量删除用户
     * @param ids
     */
    void delSelectedUser(String[] ids);

UserServiceImpl实现类：

@Override
    public void delSelectedUser(String[] ids) {
        //1、遍历数组
        for (String id : ids) {
            //2、调用删除
            dao.delete(Integer.parseInt(id));
        }
    }

DelSelectedServlet类：

@WebServlet("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取所有的id
        String[] ids = request.getParameterValues("uid");
        //2、调用service删除
        UserService service = new UserServiceImpl();
        service.delSelectedUser(ids);

        //3、跳转查询所有Servlet
        response.sendRedirect(request.getContextPath()+"/userListServlet");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

删除选中的细节处理

设置全选、全不选，以及删除条目提示是否要删除

list.jsp：

<script>
        function deleteUser(id) {
            //用户安全提示
            if (confirm("确定要删除吗?")){
                //访问路径
                location.href = "${pageContext.request.contextPath}/delUserServlet?id="+id;
            }
        }
        window.onload = function () {
            //给删除选中绑定单击事件
            document.getElementById("delSelected").onclick = function () {
                if (confirm("确定要删除选中条目吗?")){
                    //判断是否有选中条目
                    var flag = false;
                    var cbs = document.getElementById("uid");
                    for (var i = 0; i < cbs.length; i++) {
                        if (cbs[i].checked){
                            //有一个条目选中了
                            flag = true;
                            break;
                        }

                    }
                    if (flag){//有条目被选中
                        //表单提交
                        document.getElementById("form").submit();
                    }
                }
            }

            //获取第一个cb
            document.getElementById("firstCb").onclick = function () {
                //获取下边列表中所有的cb
                var cbs = document.getElementById("uid");
                //遍历
                for (var i = 0; i < cbs.length; i++) {
                    //设置这些cb的checked状态 = firstCb.checked
                    cbs[i].checked = this.checked;
                }
            }
        }
    </script>

UserServiceImpl实现类：

@Override
    public void delSelectedUser(String[] ids) {
        if (ids!=null && ids.length>0){
            //1、遍历数组
            for (String id : ids) {
                //2、调用删除
                dao.delete(Integer.parseInt(id));
            }
        }
    }

 

标签：功能,删除,ids,选择,getElementById,选中,document,id
From： https://www.cnblogs.com/xuche/p/17100515.html