1. 程式人生 > >easyui實現datagrid多行刪除功能

easyui實現datagrid多行刪除功能

效果圖:

F12瀏覽器檢視執行資訊:


html頁面: singleSelect:false,checkOnSelect: true

js:(溫馨小提示:注意根據自己實現刪除的方法去呼叫哦~ 我的多行刪除在delete裡面)

$(function () {
    var datagrid = $('#dataGrid'); //資料展示

    //為所有有data-method的元件新增事件
    $("*[data-method]").on("click",function(){
        zhengqing[$(this).data("method")]()
    })

    //防止汙染   CRUD
    window.zhengqing = {
        delete:function(){
            //getSelected:返回第一個被選中的行或如果沒有選中的行則返回null。
            //getChecked:在複選框唄選中的時候返回所有行。(該方法自1.3版開始可用)
            var row = datagrid.datagrid("getChecked");//獲取勾選的資料
            if (row){    //多行刪除
                $.messager.confirm('確定','是否確定<span style="color: red;font-size: 20px;">刪除'+row.length+'條</span>資料??',function (r) {
                    for (var i = row.length - 1; i >= 0; i--) {
                        if (r){
                            $.get("/employee/delete",{id:row[i].id},function (result) {
                                if (result.success){  //刪除成功
                                    datagrid.datagrid("reload");//重新整理頁面  reload:刪除之後會在當前頁面  當刪除本頁所有資料之後會跳到前一個頁面
                                }else {  //刪除失敗
                                    $.messager.alert('提示','此資料刪除失敗:<br />'+result.msg,"info");
                                }
                            })
                        }
                    }
                });
            }else {
                $.messager.alert('提示','請選擇一條資料進行刪除',"warning");
            }
        }
})