datagrid之增加,删除,批量删除

目录

一，增加

usermanage.jsp界面搜索按钮旁边添加新增按钮

添加点击事件，弹出窗体并清空表单

提交表单

窗体关闭

刷新数据表格

 BookDao

 BookAction

 二，删除

datagrid中添加一列删除

删除的点击事件

向后台发送删除请求

BookDao

BookAction

​

三，批量删除

usermanage.jsp界面增加按钮旁边添加批量删除按钮

 增加一列复选框

添加点击事件

 向后台发送删除请求  

BookDao

BookAction

---

一，增加

usermanage.jsp界面搜索按钮旁边添加新增按钮

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

添加点击事件，弹出窗体并清空表单

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

注意：一点要写在function内

提交表单

在function外面定义addflag

var addflag = 0;

 当进入修改方法时：

addflag = 2;

 当进入增加方法时：

addflag = 1;

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");
            }
        }
    });

 BookDao

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

 BookAction

    public String add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        bookDao.add(book);
        ResponseUtil.writeJson(resp, 1);
        return null;
    }

 

 二，删除

datagrid中添加一列删除

在修改的a标签后面添加删除的a标签

<a href="javascript:void(0);"οnclick="del();">删除<a>

删除的点击事件

function del() {
    var row = $('#dg').datagrid("getSelected");
    if (row) {
        var id = row.bid;
        // messager不能向后台发送请求，用ajax发送请求
    } else {
        alert("请选择需要删除的数据！");
    }
}

向后台发送删除请求

messager不能向后台发送请求，用ajax发送请求

$.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");
                        }
                    }
                })
            }
        });

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 {
        bookDao.del(book);
        ResponseUtil.writeJson(resp, 1);
        return null;
    }

三，批量删除

usermanage.jsp界面增加按钮旁边添加批量删除按钮

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

 增加一列复选框

{
                                    field : 'ck',
                                    checkbox : true
                                }

添加点击事件

当选中了行并且选中的行的长度大于0时，遍历每一行取得的id放入list数组中

getSelections：返回所有被选中的行，当没有被选中时返回一个空数组

 $("#btn-delall").click(
            function() {
                var row = $('#dg').datagrid("getSelections");
                var list = new Array();
                if (row != null && row.length > 0) {
                    for ( var i in row) {
                        list.push(row[i].bid);
                    }
                }
            })

向后台发送删除请求  

messager不能向后台发送请求，用ajax发送请求

if (list.length > 0) {
                    $.ajax({
                        url : $('#ctx').val()
                                + '/book.action?methodName=delall&list='
                                + list.join(","),
                        success : function(data) {
                            $("#dg").datagrid("reload");
                        }
                    })
                }

BookDao

调用删除的方法即可

BookAction

将list数字转换成字符串，split分割，遍历并获取强转成int类型的bid，调用删除方法删除

    public String delall(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        String str = req.getParameter("list");
        String[] split = str.split(",");
        for (String i : split) {
            book.setBid(Integer.parseInt(i));
            bookDao.del(book);
        }
        bookDao.del(book);
        ResponseUtil.writeJson(resp, 1);
        return null;
    }