EXTJS4.x之grid（3）实现删除用户功能

之前一节中我们实现了添加用户功能，现在我们来实现删除用户功能

1.我们要实现批量删除功能，所以要配置grid支持多选模式，为myGrid添加一个Ext.selection.CheckboxModel即可如下图

启动服务器看看，如果看到下图效果就ok了

2.为删除用户button添加一个handler，内容为

    var selRecords = Ext.getCmp("myGrid").getSelectionModel().getSelection();
    var len = selRecords.length;
    var ids = "";
    if (len == 0) {
        Ext.MessageBox.alert("提示消息", "您未选中行!");
        return false;
    }
    Ext.Msg.confirm("提示", "确定要删除吗?", function (btn) 
    {
        if (btn == "yes") {
        for (var i = 0; i < len; i++) {
            if (i == len - 1) 
            { 
                ids += selRecords[i].get("userId"); 
            }
            else {
                ids += selRecords[i].get("userId") + ",";
            }
        }
        Ext.Ajax.request(
            {
                url: "userControl.jsp?cmd=2",
                params: {
                    "ids": ids
                },
                success: function (reponse, option) {
                    Ext.getCmp("myGrid").getStore().reload();
                    Ext.MessageBox.alert("提示消息", "删除成功！");
                },
                failure: function () {
                    Ext.MessageBox.alert("提示消息", "删除失败！");
                }
            }
        );
      }
    }
  )

因为我们这里需要加上批量删除功能，所以后台接口部分还要改改，打开userControl.jsp，修改一下

//删除一个用户信息
   	case 2:
   		pstmt = con.prepareStatement("DELETE FROM user WHERE userId = ?");
   		
   		String ids = request.getParameter("ids");
   		String idArr[] = ids.split(",");
   		for(String tmp:idArr){
	   		int id = Integer.parseInt(tmp);
	   		pstmt.setInt(1, id);
   		}
	    jsonObj = new JSONObject();
   		if(pstmt.executeUpdate()>0){
	    	jsonObj.put("susses", true);	
		    jsonObj.put("msg", "删除成功");
   		}else{
	    	jsonObj.put("susses", false);	
		    jsonObj.put("msg", "删除失败");
   		}
	    out.println(jsonObj.toString());
	    pstmt.close();
	    con.close();
   	break;

主要修改的是删除记录部分，加多一层for循环。启动服务器试试吧，至此删除功能完成了。

 

 

查询功能和修改功能可以根据之前的来实现，这里就不实现了。如果看完上面两节后应该也不难了吧。