EasyUI使用笔记——Datagrid的高级用法(1)

@老徐  December 20, 2015

接上一篇[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');
});

201607231469245706241968.png
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');
    }                    
});

201607231469245746180536.png
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');
    }
});

201607231469245814291367.png
201607231469245855482471.png


添加新评论