datagrid之增加与删除

 目标：DataGrid之修改  在上节课的基础上添加增加与删除操作

一，增加

思路：

1，查询旁边添加新增按钮

2，添加点击事件弹出窗体

3，提交表单

4，窗体关闭

5，刷新数据表格

1.在usermeasage写一个新增按钮： 

<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>

 2.添加点击事件弹出窗体：（Book.js）

$("#btn-add").click(function(){
        //clear清空数据
        $('#ff').form('clear');
        $("#dd").dialog("open");
    });
}) 

 展示效果：

 

 二．单个删除

datagrid中添加一类“删除”

 {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
                return '<a href="javascript:void(0);" οnclick="edit();">修改</a>&nbsp<a href="javascript:void(0);" οnclick="del();">删除</a>';
            }
} 

 展示效果：

 BookDao：

public void del(Book book) throws Exception {
        super.executeUpdate("delete from t_mvc_book where bid=?",book,new String[] {"bid"});
    }

 BookAction:

   public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        try {
            bookDao.del(book);
            ResponseUtil.writeJson(resp,1);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp,0);
            } catch (Exception e2) {
                e.printStackTrace();
            }
            
        }    
        return null;
    }   

 在后台book.js写删除的点击事件： 

function del(){
    var row=$('#dg').datagrid("getSelected");
    if(row){
        var id=row.bid;
        //messager不向后台发送请求
        $.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
            if (r){    
                $.ajax({
                    url:$("#ctx").val()+'/book.action?methodName=del&bid='+id,
                    success:function(data){
                        if(data == 1){
                            $('#dg').datagrid('reload');
                        }
                    }
                });
            }    
        }); 
    }else{
    alert("请选择需要删除数据");
}
}

展示效果：

 

 

三.批量删除：

1、增加批量删除按钮

<a id="btn-batchDel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">批量删除</a>

2.设置复选框（book.js） 

// 设置复选框
checkbox : true,
  

3、添加批量删除事件 

//添加事件批量删除
    $("#btn-batchDel").click(function() {
        //datagrid控件（方法中的getSelections）获取对应所以的数据rows
        var rows=$('#dg').datagrid('getSelections');
        //console.log(rows);
        var ids=new Array();
        if(rows!=null&&rows.length>0){
            for (var i in rows) {
                //获得选中所以的bid
                ids.push(rows[i].bid);
            }
        }
        if(ids.length>0){
//            alert(ids.join(","))
            $.ajax({
                //同时还要把bid带过去
                url:$("#ctx").val()+'/book.action?methodName=dels&bids='+ids.join(","),
                success:function(data){
                    //data成功返回1，失败返回0；
                    if(data==1){
                        //刷新数据表格
                        var row=$('#dg').datagrid('reload');
                    }
                }
            });
        }
    }); 

4、BookDao（单个删除一样） 

public void del(Book book) throws Exception {
        super.executeUpdate("delete from t_mvc_book where bid=?",book,new String[] {"bid"});
    } 

 5.子控制器BookAtion

//批量删除
      public String dels(HttpServletRequest req, HttpServletResponse resp) {
          try {
              String ids=req.getParameter("bids");
              String id[]=ids.split(",");
              for (String i : id) {
                  book.setBid(Integer.parseInt(i));
                  bookDao.del(book);
              //1：是确认；0：是取消
              ResponseUtil.writeJson(resp, 1);
              }
          } catch (Exception e) {
              e.printStackTrace();
              try {
                  ResponseUtil.writeJson(resp, 0);
              } catch (Exception e1) {
                  e1.printStackTrace();
              }
          }
          return null;
      } 

 展示效果：