EasyUI使用笔记——Datagrid的高级用法（1）

老徐

December 20, 2015

2477 views

No comments

2384 words

前端

接上一篇[EasyUI使用笔记——Datagrid的使用及排序]，在footer处有添加、修改和删除这几个操作。

其中添加，只需要弹出新窗口就可以了，而修改和删除，需要取到选中项的内容。

下面是用法：

1.添加营业部：

先添加一段html代码，用于显示模态窗口，window这部分的用法大家可以查下easyui的相关demo

<div id="openwindow_add" class="easyui-window" title="新增营业部" data-options="modal:true,closed:true,iconCls:'icon-add'" style="width:600px;height:360px;padding:10px;">        
</div>

之后js代码：

//生成iframe
function createFrame(url) {
    var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
    return s;
}

//弹出窗口
$('#btn_add').click(function () {
    $('#openwindow_add').html(createFrame('/System/DepartmentAdd')).window('open');
});

2.修改营业部

同上，先添加一段html代码用于模拟窗口，当然也可以与添加共用一个，下面是js部分：

$('#btn_edit').click(function () {
     var row = $('#list').datagrid('getSelected');    //取得选中行
     if (row) {
        var $id = row.id;    //
        $('#openwindow_edit').html(createFrame('/System/DepartmentEdit?id='+$id)).window('open');
    }
    else{
        $.messager.alert('提示', '请选择要修改的行！', 'warning');
    }                    
});

3.删除选中项

这里有这几点：

1）删除确认

2）异步删除

3）操作完成后重新加载datagrid数据

$('#btn_delete').click(function () {
    var row = $('#list').datagrid('getSelected');
    if (row) {
        var $id = row.id;   //主键ID
        $.messager.confirm('确认', '您确认想要删除记录吗？', function (r) {
            if (r) {
                $.ajax({
                    url: '/System/DepartmentDelete',
                    data: { id: $id },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        $.messager.alert('提示', data.message, 'info');
                        $('#list').datagrid('reload');    //重新加载datagrid数据
                    },
                    error: function () {
                        $.messager.alert('错误', '删除失败', 'error');
                    }
                });
                                
            }
        });
    }
    else {
        $.messager.alert('提示', '请选择要删除的行！', 'warning');
    }
});