码迷,mamicode.com
首页 > 其他好文 > 详细

easyUI组件datagrid的二次封装

时间:2016-04-29 19:50:02      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:

项目中经常用到easyUI的组件datagird,每次重复的属性写很多(copy-paste),架构师把这活安排给我了,苦逼。。

项目是后台系统,表格行的增删改查几乎都有,有些需求还包括排序,所以写了个函数注入方法,extend默认的row方法, 代码包括两部分(函数inject 和 set datagrid )。

(function ($) {
    var extendFns = {};
    /**
     * 注入函数
     * fnName:函数名称,必填;
     * fn:函数实体,必填;
     * isGlobal:函数作用域,选填,默认是局部变量,如果需要全局访问可以设置成true;
     * 成功添加返回true,失败添加返回false
     * 2016-4-16进行更新:

     * !! 此处是项目中大组件的具体ID,可以用this.selector代替作为当前对象的方法
     * 
     * 现在使用的是该头部选项卡tabHeaderCollection下的正在访问的页面选项id作为选项;
     * 注意:如果是用动态数据作为id,请不要用局部方法,否则会出现内存累积问题;
     * 注意:注册方法时推荐使用$().injectFn形式进行注册,这样会省下查找元素的时间,当然即使查找元素也不需要过多时间,所以这项只是推荐
     * */
    $.fn.injectFn = function (fnName, fn, isGlobal) {
        //这里必须需要两个参数以上才能添加成功
        if (arguments.length > 1) {
            //函数名称必须是字符串
            if (!(fnName && $.type(fnName) === "string")) {
                //$.messager.alert("Error","The function name is  required!");
                return false;
            }

            //第二个参数必须是函数实体
            if (!$.isFunction(fn)) {
                //$.messager.alert("Error","The function is  error!");
                return false;
            }

            //是否是全局函数,如果是,无论在哪里都可以访问,局部变量,作用范围为当前头部大选项卡范围内。
            if (isGlobal === true) {
                if (extendFns.global) {
                    extendFns.global[fnName] = fn;
                }
                else {
                    extendFns.global = {};
                    extendFns.global[fnName] = fn;
                }
            }
            else {
                var selectTab=$("#tabHeaderCollection>div.selected").get(0);
                //此处可以用this.selector代替,相应的setDatagrid也用this.selector
                if(selectTab){
                    var selector=selectTab.id+"<==>";
                }
                else
                {
                    return false;
                }

                var obj = extendFns[selector];
                if (obj) {
                    obj[fnName] = fn;
                }
                else {
                    obj = extendFns[selector] = {};
                    obj[fnName] = fn;
                }
            }

            return true;
        }
        return false;
    };

    //grid使用函数,可以直接调用注入的函数,也可以对grid进行初始化,也可以返回相对应的函数。
    //option:有三种类型的值:1.字符串:返回立即执行函数执行后的结果;2.数组:对grid进行初始化,最简单的一种grid使用方式;3.对象:可以是对grid进行初始化,也可以是获取需要的执行函数。
    /*---当options为对象---
     *@columns datagrid 列属性
     *@toolbar 包括title、search、addRow,或者直接是数组,传递给datagrid属性
     *@pagination  pagination相关数据
     *@handlers 可以是boolean值,也可以是包含handlers的方法名的对象,取值为true
     * */
    $.fn.setDatagrid = function (option) {
        //默认grid 对象,可以进行扩展修改
        var defaultOption = {
            showHeader: true,
            toolbar: [],
            idField: "Id",
            columns: [],
            striped: true,
            autoRowHeight: false,
            remoteSort: false,
            rownumbers: false,
            pagination: false,
            loadMsg: "Loading......",
            width: ‘100%‘,
            height: ‘100%‘,
            singleSelect: true
        };

        var self = this;

        //默认的toolbar 无法修改,只能调用
        var toolbar = {
            //标题相关
            title: {
                text: ‘Severity Scale‘,
                handler: function () {
                    return {text: ‘<b class="NoBtnStyle title left">‘ + toolbar.title.text + ‘</b>‘}

                }
            },
            search: {
                handler: function () {
                },
                prompt: ‘input keywords‘
            },
            addRow: {
                text: ‘Severity Scale‘,
                handler: function () {
                    var selectedRow = $(self).datagrid(‘getSelected‘);
                    var selectedIndex = $(self).datagrid(‘getRowIndex‘, selectedRow);
                    //所选位置下方添加一条空记录,如没有选择,则在第一条增加
                    $(self).datagrid(‘insertRow‘, {
                        index: selectedIndex + 1,
                        row: {isNewRecord: true}
                    });
                    $(self).datagrid(‘beginEdit‘, selectedIndex + 1);
                }
            }
        };


        //pagination相关数据,可以进行修改,也可以不调用
        var pagination = {
            pageList: [20, 40, 60, 80],
            pageSize: 20,
            pageNumber: 1,
            layout: [‘list‘, ‘sep‘, ‘first‘, ‘prev‘, ‘links‘, ‘next‘, ‘last‘, ‘sep‘, ‘refresh‘],
            displayMsg: ‘Current {from} - {to} Records Total {total} Records‘,
            onSelectPage: function (pageNumber, pageSize) {
                //datagird 如果有pagination,需重写此方法
            }
        };

        //row handler 内部常用函数,使用比较高的函数
        var rowHandler = {
            /**
             * @param newRecord 是否为新增row
             * @param index  index of row
             * @param options  ajax请求对象包括子对象newRequest and updateRequest,子对象url和data是必填的
             * @param rowMsg  row数据存在时候的提示信息
             * */
            saveRow: function (newRecord, index, options, rowMsg) {
                //新增row
                if (newRecord) {
                    //新增相关数据
                    var newRequest = {
                        url: ‘‘,
                        type: ‘POST‘,
                        async: true,
                        data: {},
                        success: function (rep, textStatus, jqXHR) {
                            if (rep.ResponseCode === 100) {
                                rep.ResponseData.isNewRecord = false;
                                $(self).datagrid(‘updateRow‘, {
                                    index: index,
                                    row: rep.ResponseData
                                });
                                $.NotifyMsg("Success", rep.ResponseMsg);
                            }else{
                                $(self).datagrid(‘deleteRow‘, index);
                                $.NotifyError("Error", rep.ResponseMsg);
                            }
                        },
                        error: function (rep) {
                            $(self).datagrid(‘beginEdit‘, index);
                            $.NotifyError("Error", ‘service loaded error‘);
                        },
                        complete: $.noop
                    };
                    $.extend(newRequest, options.newRequest);
                    $.SendRequest(newRequest.url, newRequest.data, newRequest.type, newRequest.complete, newRequest.error, newRequest.success, newRequest.async);
                }
                //更新row
                else {
                    var updateRequest = {
                        url: ‘‘,
                        type: ‘PUT‘,
                        async: true,
                        data: {},
                        success: function (rep, textStatus, jqXHR) {
                            if (rep.ResponseCode == 300) {
                                $(self).datagrid(‘updateRow‘, {
                                    index: index,
                                    row: rep.ResponseData
                                });
                                $.NotifyMsg("Success", rep.ResponseMsg);
                                $(self).datagrid(‘refreshRow‘, index);
                            } else if (rep.ResponseCode == -300 || -301) {
                                //装载原来的数据
                                $(self).datagrid(‘updateRow‘, {
                                    index: index,
                                    row: rep.ResponseData
                                });
                                $(self).datagrid(‘beginEdit‘, index);
                                $.NotifyError(SMART.msg.isExist.title, SMART.msg.isExist.content(rowMsg));
                            }
                            //出错时候处理
                            else {
                                $.NotifyError("Error", rep.ResponseMsg);
                                $(self).datagrid(‘deleteRow‘, index);
                            }
                        },
                        error: function (rep) {
                            $(self).datagrid(‘beginEdit‘, index);
                            $.NotifyError("Error", ‘service loaded error‘);
                        },
                        complete: $.noop
                    };
                    $.extend(updateRequest, options.updateRequest);
                    $.SendRequest(updateRequest.url, updateRequest.data, updateRequest.type, updateRequest.complete, updateRequest.error, updateRequest.success, updateRequest.async);
                }
            },
            cancelRow: function (target) {
                var index = window.Ext_EasyUI.DataGrid.getRowIndex(target);
                var pagerows = $(this.selector).datagrid(‘getRows‘);
                var row = pagerows[index];
                $(self).datagrid(‘cancelEdit‘, index);
            },
            editRow: function (target) {
                var index = window.Ext_EasyUI.DataGrid.getRowIndex(target);
                $(self).datagrid(‘selectRow‘, index);
                $(self).datagrid(‘beginEdit‘, index);
            },
            deleteRow: function (target, url, id, msg, queryParam) {
                var index = window.Ext_EasyUI.DataGrid.getRowIndex(target);
                // 获取当前页数据
                var pagerows = $(self).datagrid(‘getRows‘);
                // 获取当前操作行
                var row = pagerows[index];
                var rowID = row[id];
                var params = queryParam ||‘‘;
                $.messager.confirm(SMART.msg.remove.title, ‘Please confirm deletion of ‘ + msg + ‘ . This operation cannot be undone.‘, function (r) {
                    if (r) {
                        $.SendRequest(url + rowID, params, "Delete", $.noop, function (rep, textStatus, jqXHR) {
                            $.NotifyError("Error", ‘service loaded error‘);
                        }, function (rep, textStatus, jqXHR) {
                            if (rep.ResponseCode === 200) {
                                $(self).datagrid(‘deleteRow‘, index);
                            }
                            //出错时候处理
                            else {
                                $.NotifyError("Error", rep.ResponseMsg);
                            }
                        });
                    }
                });
            },
            //选中行上移一位
            upRow: function (target, url) {
                var index = window.Ext_EasyUI.DataGrid.getRowIndex(target),
                    data = $(this.selector).datagrid("getRows");
                var curData = data[index],
                    upData = data[parseInt(index - 1)];
                if (index == 0) {
                    $.NotifyWarning(‘Warning‘, ‘The row is already at the top.‘);
                    return false;
                }
                $.SendRequest(url + $.UUID(), {
                    method: ‘ExchangeSort‘,
                    sourceId: curData.Id,
                    sourceSort: curData.Sort,
                    targetId: upData.Id,
                    targetSort: upData.Sort
                }, ‘PUT‘, $.noop, function (rep, textStatus, jqXHR) {
                    $.NotifyError("Error", ‘service load error‘);
                }, function (rep) {
                    if (rep.ResponseCode == 300) {
                        var currentSort = curData.Sort;
                        var upDataSort = upData.Sort;
                        upData.Sort = currentSort; //上=下
                        curData.Sort = upDataSort; //下=上
                        //更新上面一条的数据sort
                        $(self).datagrid(‘updateRow‘, {
                            index: index - 1,
                            row: upData
                        }).datagrid(‘updateRow‘, {
                            index: index,
                            row: curData
                        });


                        var upIndex = parseInt(index - 1);
                        var delIndex = parseInt(index + 1);
                        $(self).datagrid(‘insertRow‘, {
                            index: upIndex,
                            row: curData
                        }).datagrid(‘deleteRow‘, delIndex);

                    } else {
                        $.NotifyError("Error", rep.ResponseMsg);
                    }
                });
            },
            //row往下移一位
            downRown: function (target, url) {
                var index = window.Ext_EasyUI.DataGrid.getRowIndex(target);
                var len = $(this.selector).datagrid("getRows").length;
                if (index == len - 1) {
                    $.NotifyWarning(‘Warning‘, ‘The row is already at the bottom.‘);
                    return false;
                }
                var data = $(this.selector).datagrid("getRows");
                var curData = data[index],
                    downData = data[parseInt(index + 1)];
                $.SendRequest(url + $.UUID(), {
                    method: ‘ExchangeSort‘,
                    sourceId: curData.Id,
                    sourceSort: curData.Sort,
                    targetId: downData.Id,
                    targetSort: downData.Sort
                }, ‘PUT‘, $.noop, function (rep, textStatus, jqXHR) {
                    $.NotifyError("Error", ‘service load error‘);
                }, function (rep) {
                    if (rep.ResponseCode == 300) {
                        var currentSort = curData.Sort;
                        var downDataSort = downData.Sort;
                        downData.Sort = currentSort; //上=下
                        curData.Sort = downDataSort; //下=上
                        //更新上面一条的数据sort
                        $(self).datagrid(‘updateRow‘, {
                            index: index + 1,
                            row: downData
                        }).datagrid(‘updateRow‘, {
                            index: index,
                            row: curData
                        });


                        $(self).datagrid(‘insertRow‘, {
                            index: index + 2,
                            row: curData
                        }).datagrid(‘deleteRow‘, index);
                    } else {
                        $.NotifyError("Error", rep.ResponseMsg);
                    }
                });
            },
            updateActions: function (index) {
                $(self).datagrid(‘refreshRow‘, index);
            },
            /**
             * @param options属性 url必须
             * */
            loadPageData: function (options) {
                var requestParam = {
                    url: ‘‘,
                    type: ‘GET‘,
                    async: true,
                    data: ‘‘,
                    success: function (rep, textStatus, jqXHR) {
                        if (rep.ResponseCode === 400) {
                            var data = rep.ResponseData;
                            $(self).datagrid(‘loadData‘, data);
                            $(self).datagrid(‘loaded‘);
                            defaultOption.pagination ? $(self).datagrid(‘getPager‘).pagination(‘loaded‘) : ‘‘;
                            $.NotifyMsg("Success", rep.ResponseMsg);
                            // 刷新 分页栏目的基础信息
                            if (defaultOption.pagination) {
                                $(self).datagrid(‘getPager‘).pagination(‘refresh‘, {
                                    pageNumber: options.data.pageIndex,
                                    pageSize: options.data.pageSize,
                                    total: rep.ResponseTotal || 0
                                });
                            }
                        } else {
                            $(self).datagrid(‘loaded‘);
                            defaultOption.pagination ? $(self).datagrid(‘getPager‘).pagination(‘loaded‘) : ‘‘;
                            $.NotifyMsg(‘Error‘, rep.ResponseMsg);
                            if (defaultOption.pagination) {
                                $(self).datagrid(‘getPager‘).pagination(‘refresh‘, {
                                    pageNumber: options.data.pageIndex,
                                    pageSize: options.data.pageSize,
                                    total: rep.ResponseTotal || 0
                                });
                            }
                        }
                    },
                    error: function (rep) {
                        $(self).datagrid(‘loaded‘);
                        defaultOption.pagination ? $(self).datagrid(‘getPager‘).pagination(‘loaded‘) : ‘‘;
                        $.NotifyError(‘Error‘, ‘service loaded error‘);
                        if (defaultOption.pagination) {
                            $(self).datagrid(‘getPager‘).pagination(‘refresh‘, {
                                pageNumber: options.data.pageIndex,
                                pageSize: options.data.pageSize,
                                total: 0
                            });
                        }
                    },
                    complete: $.noop
                };

                //extend 参数
                $.extend(requestParam, options);
                if (!options) {
                    $.NotifyWarning(‘Warning‘, ‘parameters is required.‘);
                    return false;
                }
                // UI状态 - 表格进入正在读取状态
                $(self).datagrid(‘loading‘);
                defaultOption.pagination ? $(self).datagrid(‘getPager‘).pagination(‘loading‘) : ‘‘;

                //发送获取分页数据的请求
                $.SendRequest(requestParam.url, requestParam.data, requestParam.type, requestParam.complete, requestParam.error, requestParam.success, requestParam.async);
            },
        };

        //使用头部选项卡作为局部变量 此处可以用this.selector判断
        var selectTab=$("#tabHeaderCollection>div.selected").get(0);
            if(selectTab){
                var selector=selectTab.id+"<==>";
            }
            else{
                selector="";
            }


        //方法汇集,注入的非全局方法优先级最高,rowHandler其次,全局方法最低。
        var handlers = $.extend({}, extendFns["global"] || {}, rowHandler, extendFns[selector] || {});

        //最简单的用法,就是直接传递一数组【columns data】进来就可以使用.
        if ($.isArray(option)) {
            defaultOption.columns = option;
        }
        //如果是对象,相对来说是比较复杂的
        else if ($.isPlainObject(option)) {
            defaultOption.columns = option.columns;

            /**
             * 工具栏,option.toolbar
             * 不是数组,直接传对象,只能在title,search,addRow上extend
             * 是数组,直接extend datagrid toolbar
             */
            if (!$.isArray(option.toolbar)) {
                if (option.toolbar === true) {
                    delete option.toolbar;
                }
                else if ($.isPlainObject(option.toolbar)) {
                    $.extend(toolbar, option.toolbar);
                    delete option.toolbar
                }
                var gridToolBar = [];
                //add toolbar
                /**
                 * @param options的toolbar的子对象为空对象时,去除该toolbar选项,不增加到toolbar
                 * */
                for (var i in toolbar) {
                    if (i === ‘title‘ && !$.isEmptyObject(toolbar.title)) {
                        gridToolBar.push(toolbar.title.content());
                    }
                    if (i === ‘search‘ && !$.isEmptyObject(toolbar.search)) {
                        gridToolBar.push({text: ‘<input class="NoBtnStyle" id="searchbox">‘});
                    }
                    if (i === ‘addRow‘ && !$.isEmptyObject(toolbar.addRow)) {
                        gridToolBar.push({
                            text: toolbar.addRow.text,
                            iconCls: ‘icon-add‘,
                            handler: toolbar.addRow.handler
                        })
                    }

                }
                defaultOption.toolbar = gridToolBar;
            }
            else if ($.isArray(option.toolbar)) {
                $.extend(defaultOption.toolbar, option.toolbar);
            }

            /**
             * 分页 option.pagination
             * 布尔值,默认变量paginaton
             * obj, extend 变量pagination
             * */
            if (option.pagination === true) {
                defaultOption.pagination = true;
                delete option.pagination;
            }
            else if ($.isPlainObject(option.pagination)) {
                defaultOption.pagination = true;
                $.extend(pagination, option.pagination);
                delete option.pagination;
            }

            //通用事件,需要的时候才会附加返回。
            var handlerFns = {length: 0, selector: self.selector};
            //返回所有函数:设置handlers为true即可,比如{handlers:true}
            if (option.handlers === true) {
                for (var key in handlers) {
                    handlerFns[key] = handlers[key];
                    handlerFns.length++;
                }
                delete option.handlers;
            }
            else if ($.isPlainObject(option.handlers)) {
                for (var key in option.handlers) {
                    //只要设置相对应的函数名称为true就可以返回,比如返回editRow函数,可以这样设置{editRow:true}
                    if (option.handlers[key] === true) {
                        handlerFns[key] = handlers[key];
                        handlerFns.length++;
                    }
                }
                delete option.handlers
            }

            //set null,所有需要用到的函数在handlerFns对象里
            handlers = null;

            //删除不相关的属性后再设置defaultOption
            $.extend(defaultOption, option);
        }
        //字符串形式调用method
        else {
            //直接使用该函数
            if ($.type(option) === "string") {
                var key = arguments[0];
                var handler = handlers[key];
                if (handler) {
                    var arrs = Array.prototype.slice.call(arguments, 1);
                    handler.apply(self, arrs);
                }
            }
            return self;
        }

        //是否是进行函数调用?如果是,不用写columns,就可以直接返回,
        // 注:返回的事件获取方法是,返回对象obj,那么调用函数可以这样获取obj.handler下的所有函数就是你需要的函数。
        if (!$.isArray(defaultOption.columns)) {
            if (handlerFns.length > 0)
                self.handler = handlerFns;
            return self;
        }

        var grid = $(self).datagrid(defaultOption)
            .datagrid({
                onBeforeEdit: function (index, row) {
                    row.editing = true;
                    $(self).datagrid(‘refreshRow‘, index);
                },
                onAfterEdit: function (index, row) {
                    row.editing = false;
                    $(self).datagrid(‘refreshRow‘, index);
                },
                onCancelEdit: function (index, row) {
                    // 判断是否为新增加数据
                    var newRecord = row.hasOwnProperty(‘isNewRecord‘) && row.isNewRecord === true;
                    // 如果说新增数据,取消操作会则删除本行
                    if (newRecord) {
                        $(self).datagrid(‘deleteRow‘, index);
                    }
                    else {
                        row.editing = false;
                        $(self).datagrid(‘refreshRow‘, index);
                    }
                },
                onLoadSuccess: function(){
                    SMART.UI.columns_align();
                }
            });
        if (defaultOption.pagination) {
            //调用的时候再次datagrid方法会覆盖这次生成的pagination,变成default pagination
            //所以setTimeout调用
            setTimeout(function () {
                $(self).datagrid("getPager").pagination(pagination);
            },50)
        }

        if (handlerFns.length > 0) {
            grid.handler = handlerFns;
        }

        //返回datagird自身,链式
        return grid;
    }

})(jQuery);
//jquery的ajax,上面代码中用到的
$.extend = ({
    SendRequest: function (url, requestData, requestType, completeF, ErrorF, SuccessF,async) {
        async=async===false?false:true;
        var ajaxOptions = {
            type: requestType,
            url: url,
            dataType: "json",
            async: async,
            cache: false,
            ifModified: false,
            data: requestData,
            complete: function (rep, textStatus, jqXHR) {
                completeF(jqXHR, textStatus);
            },
            success: function (rep, textStatus, jqXHR) {
                SuccessF(rep, textStatus, jqXHR);
            },
            error: function (rep, textStatus, jqXHR) {
                ErrorF(rep, textStatus, jqXHR);
            },
        }
    },
});

easyUI组件datagrid的二次封装

标签:

原文地址:http://blog.csdn.net/wkyseo/article/details/51224832

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!