datagrid之新增删除以及批量删除

一、新增（结合上节）

思路：

①添加一个新增按钮

②添加事件弹出窗口

③提交表单

④关闭窗体，刷新数据表格

解决：

 ①新增按钮

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

 ②绑定事件

//新增点击事件
    $('#btn-add').click(function() {
        //清空表单
         $('#ff').form('clear');
        //打开窗体
        $("#dd").dialog("open");
    });

 ③提交表单

（1）dao方法

//新增
    public void  add(Book book) throws Exception{
        super.executeUpdate("insert into t_mvc_book values(?,?,?) ", book, new String[] {"bid","bname","price"});
    }

（2）web层

 //增加
public String add(HttpServletRequest req, HttpServletResponse resp) {
    // TODO Auto-generated method stub
try {
    bookDao.add(book);
    ResponseUtil.writeJson(resp, 1);//data的传输
} catch (Exception e) {
    e.printStackTrace();
    try {
        ResponseUtil.writeJson(resp, 0);
    } catch (Exception e2) {
        e2.printStackTrace();
    }
}
return null;
}

（3）后端与前端的连接

给定义一个变量var addFlag=0

在addFlag=1---》增加

在addFlag=2---》修改

function submitForm() {
    //拿到所选择的行
    var row= $('#dg').datagrid("getSelected");
    var href= null;
    if(addFlag == 2){
        href= $("#ctx").val()+'/book.action?methodName=edit'
    }else if(addFlag == 1){
        href= $("#ctx").val()+'/book.action?methodName=add'
    }
    ④关闭窗体，刷新数据表格
    $('#ff').form('submit', {
        url:href,
        success: function(data){
        if(data == 1){//data等于1的时候自动刷新关闭窗口
            $("#dd").dialog("close");
            $('#dg').datagrid('reload');//刷新
        }
        }
    });

}

效果如下：

 

---

二、删除 

思路：

①datagrid中添加一列删除

②删除的点击事件

③先后台发请求

④刷新

解决：

 ①datagrid中添加一列删除

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

 ②删除的del事件

messager控件的使用（由api可知）：

1. $.messager.confirm('确认','您确认想要删除记录吗？',function(r){   
2.     if (r){   
3.         alert('确认删除');   
4.     }   
5. });  

*messager不能向后台发送请求，所以需要使用到ajax

前端代码：

//删除
function del() {
    //拿到行
    var row = $('#dg').datagrid('getSelected');
    if (row) {
        //获取id
    var id=row.bid;
    //messager不能向后台发送请求
    $.messager.confirm('确认', '您确认删除书籍吗？', function (r) {
        if (r) {
            $.ajax({
                url: $("#ctx").val()+'/book.action?methodName=del&bid='+id,
                success: function (data) {//传一个data
                    if(data==1){//data=1自动刷新
                    $('#dg').datagrid('reload');
                    }
                }
            });
        }
    });
    }else {//可能没有选中行
        alert("请勾选数据...");
        
    }

 后端代码：

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

 //删除action
public String del(HttpServletRequest req, HttpServletResponse resp) {
    // TODO Auto-generated method stub
try {
    bookDao.del(book);
    ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
    e.printStackTrace();
    try {
        ResponseUtil.writeJson(resp, 0);
    } catch (Exception e2) {
        e2.printStackTrace();
    }
}
return null;
}

 运行效果：

 

---

三、批量删除

思路

①给数据表格datagrid添加checkbox

②获取所有的行（和id）*（在api中寻找）

③后台接收ids并调用删除方法

④刷新

解决：

①给数据表格datagrid添加checkbox

$('#dg').datagrid({    
        url:$("#ctx").val()+'/book.action?methodName=datagrid',
        pagination:true,
        fitColumns:true,
        checkbox:true,//复选框
        toolbar:'#tb',
        columns:[[  
            {field:'ck', checkbox:true},   //添加一列复选框
            {field:'bid',title:'id',width:100},    
            {field:'bname',title:'名称',width:150},    
            {field:'price',title:'价格',width:100},
            {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
                return '<a href="#" οnclick="del()">删除</a>&nbsp;&nbsp;' +
                '<a href="#" οnclick="edit();">修改</a>';
            }
}
        ]]    
    });

效果图：

②获取所有的行*（在api中寻找）

（1）前端代码添加一个按钮和给他添加点击事件

//按钮

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

---

//添加点击事件

//批量删除
    $('#btn-batch').click(function() {
        //获取所有选中数据
        var rows= $('#dg').datagrid("getSelections");
        var ids=new Array();//数组
        if(rows !=null && rows.length>0){
        for(var i in rows){
            ids.push(rows[i].bid);//把单个行放入数组
        }
    }
        if(ids.length>0){
             $.messager.confirm('确认', '您确认删除书籍吗？', function (r) {
                    if (r) {
                      $.ajax({
                               url:$("#ctx").val()+'/book.action?methodName=Alldel&ids='+ids.join(","),
                               success:function(data){
                                   if(data==1){
                                       $("#dg").datagrid("reload");
                               }
                           }
                       });
                    }
                });
        }
    });
    
})

(2)后端代码

//批量删除
public String Alldel(HttpServletRequest req, HttpServletResponse resp) {
try {
    String stu=req.getParameter("ids");
    String[] ids=stu.split(",");
    for(String s: ids) {

book.setBid(Integer.valueOf(s));

        bookDao.del(book);
    }
    ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
    e.printStackTrace();
    try {
        ResponseUtil.writeJson(resp, 0);
    } catch (Exception e2) {
        e2.printStackTrace();
    }
}
return null;
}

效果展示：