easyui中edatagrid在增删改时自定义参数

需求

最近用到edatagrid这个扩展,但是由于后台框架限制,接收的参数有特殊格式,需要在增删改的时候格式化参数,但是仔细研究了API之后发现没有对应的方法,于是乎决定扩展一点功能

分析

修改插件源码似乎不是什么好办法,但是如果保持原有用法不变,只是扩展一些用法的话应该问题不大,毕竟是兼容的方法,所以我决定从源码入手,扩展一下

实现

首先考虑了增加参数,但是增加参数的话需要分别为增删改加上一个paramFormater函数,这样就增加了记忆的负担,而且相关性很差,所以我决定扩展三个url,实现步骤如下

• 如果url是字符串则保持原有逻辑
• 如果url是对象,则 url = url.url,发送的参数修改为 url.paramFormater(row) 的返回值

代码如下

增加和修改的逻辑都在onAfterEdit函数中,修改onAfterEdit函数如下:

onAfterEdit: function(index, row){
    delAutoGrid(this);
    opts.editIndex = -1;
    var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
    if (url){
        var changed = false;
        var fields = $(this).edatagrid('getColumnFields',true).concat($(this).edatagrid('getColumnFields'));
        for(var i=0; i<fields.length; i++){
            var field = fields[i];
            var col = $(this).edatagrid('getColumnOption', field);
            if (col.editor && opts.originalRow[field] != row[field]){
                changed = true;
                break;
            }
        }
        if (changed){
            
                        //根据url类型修改了参数
            if (typeof url === "object" && $.isFunction(url.paramFormater)){
                row = url.paramFormater.call(null,row,opts.originalRow);
                url = url.url;
            }

            $.post(url, row, function(data){
                if (data.isError){
                    $(target).edatagrid('cancelRow',index);
                    $(target).edatagrid('selectRow',index);
                    $(target).edatagrid('editRow',index);
                    opts.onError.call(target, index, data);
                    return;
                }
                data.isNewRecord = null;
                $(target).datagrid('updateRow', {
                    index: index,
                    row: data
                });
                if (opts.tree){
                    var idValue = row[opts.idField||'id'];
                    var t = $(opts.tree);
                    var node = t.tree('find', idValue);
                    if (node){
                        node.text = row[opts.treeTextField];
                        t.tree('update', node);
                    } else {
                        var pnode = t.tree('find', row[opts.treeParentField]);
                        t.tree('append', {
                            parent: (pnode ? pnode.target : null),
                            data: [{id:idValue,text:row[opts.treeTextField]}]
                        });
                    }
                }
                opts.onSuccess.call(target, index, row);
                opts.onSave.call(target, index, row);
            },'json');                      
        } else {
            opts.onSave.call(target, index, row);
        }
    } else {
        opts.onSave.call(target, index, row);
    }
    if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row);
},

删除的逻辑在 _del函数中,其中多行删除的逻辑是一行一行的调用_del函数,这个逻辑很是坑爹,但是暂时还可以满足我的需求,所以就没有修改它,只是在url上做了扩展,可以发送自定义参数,这样对于联合主键的表来说会方便不少,_del函数修改如下

function _del(row){
    var index = dg.datagrid('getRowIndex', row);
    if (index == -1){return}
    if (row.isNewRecord){
        dg.datagrid('cancelEdit', index);
    } else {
                //修改了这里的代码
        var url = opts.destroyUrl;
        if (url){
            //修正了参数
            var idValue = row[opts.idField||'id'];
            var param = {id:idValue};
            if (typeof url === "object" && $.isFunction(url.paramFormater)){
                param = url.paramFormater.call(null,row,opts.originalRow);
                url = url.url;
            }
            
            $.post(url, param , function(data){
                var index = dg.datagrid('getRowIndex', idValue);
                if (data.isError){
                    dg.datagrid('selectRow', index);
                    opts.onError.call(dg[0], index, data);
                    return;
                }
                if (opts.tree){
                    dg.datagrid('reload');
                    var t = $(opts.tree);
                    var node = t.tree('find', idValue);
                    if (node){
                        t.tree('remove', node.target);
                    }
                } else {
                    dg.datagrid('cancelEdit', index);
                    dg.datagrid('deleteRow', index);
                }
                opts.onDestroy.call(dg[0], index, row);
                var pager = dg.datagrid('getPager');
                if (pager.length && !dg.datagrid('getRows').length){
                    dg.datagrid('options').pageNumber = pager.pagination('options').pageNumber;
                    dg.datagrid('reload');
                }
            }, 'json');
        } else {
            dg.datagrid('cancelEdit', index);
            dg.datagrid('deleteRow', index);
            opts.onDestroy.call(dg[0], index, row);
        }
    }
}

修改后的API

用法和原来保持一致,如果原来有页面依赖这个插件,完全不用改动代码
新增用法:

参数	类型	介绍	默认值
saveUrl	string/object	A URL to save data to server and return the added row.	null
updateUrl	string/object	A URL to update data to server and return the updated row.	null
destroyUrl	string/object	A URL to post 'id' parameter to server to destroy that row.	null

示例:

//以saveUrl做例子,这里配置了url,paramFormater函数接收两个参数row和oldrow,为当前需要保存的行数据以及原来的数据.
//为row加上了自己的数据,当然,这里可以返回任意你想要发送的数据,都很方便
//updateUrl和destroyUrl也同样做了扩展,可以方便的发送自己想要的数据
saveUrl:{
    url:"savadata.php",
    paramFormater: function(row,oldrow){
        row.mydata = "mydata";
        return row;
    }
}

写在最后

希望这点小小的改动可以帮到大家下面是我改好的插件,放在了百度云盘了,如果有需要可以直接下载覆盖原来的插件就可以用了,不会影响原来的功能
点击下载(百度云盘)

后记

在使用过程中又发现了一个问题,就是有时候需要原来的数据做一些处理,还好插件里已经记录了下来,我们只需要在调用paramFormater的时候加上这个参数就可以了,所以我又修改了一下代码
PS:文章里的代码改了,百度云盘的文件没有更新,如果需要自己改一下,只是在call的时候加一个参数

转载于:https://www.cnblogs.com/cnjs/p/5077277.html