easyUI组件datagrid的二次封装

项目中经常用到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);
},
}
},
});