Datagrid之增删及批量删除

主要内容：

 一、增加

1、添加一个增加按钮

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

 2、写增加的Dao方法及子控制器内的方法

public void add( Book book) throws Exception {

// 随机一个id

book.setBid((int)new Date().getTime());

super.executeUpdate("insert into t_mvc_book values(?,?,?)",book,new String[] {"bid","bname","price"});

}

public String add(HttpServletRequest req, HttpServletResponse resp) {

try {

 bookDao.add(book);

//  增加成功返回1

 ResponseUtil.writeJson(resp, 1);

} catch (Exception e) {

e.printStackTrace();

try {

// 增加失败返回0

 ResponseUtil.writeJson(resp, 0);

} catch (Exception e2) {

e2.printStackTrace();

}

}

return null;

}

3、在js文件中设置个值，用于方法的跳转

var addFlag=0;

4、在js文件中添加增加的点击事件（清除表单数据，打开增加窗口）

$("#btn-add").click(function(){

// 清除表单数据

$('#ff').form('clear');

// 打开窗口

$("#dd").dialog("open");

// 设置值用于判断跳转方法

addFlag=1;

});

5、给修改的点击事件也设置个跳转值

addFlag=2;

6、提交表单

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){

$("#dd").dialog("close");

// 刷新

$("#dg").datagrid("reload");

}

}

});

}

展示结果：

 二、删除

1、datagrid中添加一列“删除”

{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){

return '<a href="javascript:void(0);" οnclick="edit();">修改</a>  <a href="javascript:void(0);" οnclick="del();">删除</a>'

}

2、写删除的Dao方法及子控制器内的方法

public void del( Book book) throws Exception {

super.executeUpdate("delete from t_mvc_book where bid=?",book,new String[] {"bid"});

}

public String del(HttpServletRequest req, HttpServletResponse resp) {

try {

 bookDao.del(book);

//  删除成功返回1

 ResponseUtil.writeJson(resp, 1);

} catch (Exception e) {

e.printStackTrace();

try {

// 删除失败返回0

 ResponseUtil.writeJson(resp, 0);

} catch (Exception e2) {

e2.printStackTrace();

}

}

return null;

}

3、增加删除的点击事件（利用messager（消息窗口）控件的用法）

function del(){

// 得到被选中的行

var row=$('#dg').datagrid("getSelected");

if(row){

var id=row.bid;

// messager不能向后台发送请求,利用Ajax查到数据，在把数据绑到控件里

$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    

    if (r){    

       $.ajax({

        rl:$("#ctx").val()+'/book.action?methodName=del&bid='+id,

        success:function(data){

        if(data ==1){

        $("#dg").datagrid("reload");

        }

        }

       });   

    }    

});  

}else{

alert("请选择需要删除的数据")

}

}

最终结果：

三、批量删除 

1、从datagrid控件中选中添加复选框属性一列

 checkbox:true,

2、在界面给予一个批量删除的按钮

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

3、写批量删除的点击事件

①、利用datagrid控件中方法返回被选中的行

getSelections

none

返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。

//    批量删除的点击事件
    $("#btn-batchDel").click(function(){
        var rows=$('#dg').datagrid("getSelections");
//        用于存放id
        var ids=new Array();
        if(rows !=null && rows.length>0){
            for(var i in rows){
                ids.push(rows[i].bid);
            }
        }
        if(ids.length >0){
            $.ajax({
                   url:$("#ctx").val()+'/book.action?methodName=dels&bids='+ids.join(","),
                   success:function(data){
                       if(data ==1){
                           $("#dg").datagrid("reload");
                       }
                   }
               });
        }
    });

3、子控制器调用dao方法中单个删除的方法

public String dels(HttpServletRequest req, HttpServletResponse resp) {
        try {
        String ids=req.getParameter("bids");
        String id[]=ids.split(",");
        for (String d : id) {
            book.setBid(Integer.parseInt(d));
            bookDao.del(book);
        }
//         删除成功返回1
         ResponseUtil.writeJson(resp, 1);
        } catch (Exception e) {
            e.printStackTrace();
            try {
//                删除失败返回0
                 ResponseUtil.writeJson(resp, 0);
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }
        return null;
    }

得到结果：

 

这期内容结束~