本文深入探讨了jQuery插件的开发方法，包括$.fn方法的使用，插件的实例化和缓存，以及如何通过$.fn.extend扩展多个方法。特别介绍了emapdatatable插件的具体实现，展示了如何利用jQuery插件增强网页功能。
定义一个插件 plugin
$.fn.emapdatatable = function(options, params, callback, flag) { };jquery中的$.fn的用法
一、$.fn.method()=function(){}和$.fn.extend({})的比较
jQuery.fn ===$.fn=== jQuery.prototype
- $.fn.method()=function(){}的调用，把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。由于有return this,所以支持链式，在调用的时候可以这样写：
$('.blue').blueBorder().blueText(); - $.fn.extend({}) 是对$.fn.method()=function(){}的扩展，它可以定义多个方法：
-
$.fn.extend({ a: function() { }, b: function() { } });等效于：
$.fn.a = function() { }; $.fn.b = function() { }; -
$.extend({}) ,为jQuery类添加方法，可以理解为扩展静态方法
$.extend({ abc: function(){ alert('abc'); } });
emapdatatable插件的具体实现
$.fn.emapdatatable = function(options, params, callback, flag) {
var instance, initParams;
instance = this.data('emapdatatable');
initParams = this.data('initParams');
if (options === true) return instance;
/**
* 判断插件是否已经实例化过，如果已经实例化了则直接返回该实例化对象
*/
if (!instance) {
//params为表格渲染的初始化参数，后续表格的reload始终会携带该参数
$(this).data('initParams', options.params);
return this.each(function() {
//将实例化后的插件缓存在dom结构里（内存里）
return $(this).data('emapdatatable', new Plugin(this, options));
});
}
/**
* 优雅处： 如果插件的参数是一个字符串，则 调用 插件的 字符串方法。
* 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
* doSomething是刚才定义的接口。
* 这种方法 在 juqery ui 的插件里 很常见。
*/
if ($.type(options) === 'string') {
var paramsObj = $.extend({}, initParams, params);
var querySetting = [];
//默认如果请求参数中有高级搜索的参数 会把其他参数合并进高级搜索参数querySetting
//如果flag为false则不合并。
if (typeof paramsObj.querySetting != 'undefined' && flag !== false) {
// add by liujun 2016-12-8 originQuerySettingType queryStting处理前后保持相同的类型，如果之前的字符串则处理完后也序列号成字符串
var originQuerySettingType = ''
if (typeof paramsObj.querySetting === 'string') {
querySetting = JSON.parse(paramsObj.querySetting);
originQuerySettingType = 'string'
} else {
querySetting = paramsObj.querySetting
originQuerySettingType = 'object'
}
$.each(paramsObj, function(k, v) {
if (k != 'querySetting' && ($.type(v) == 'number' || $.type(v) == 'string' || $.type(v) == 'boolean')) {
if ($.type(v) == 'string' && v.indexOf(',') > -1) {
// var valueArr = v.split(',');
// valueArr.forEach(function(item) {
// querySetting.push({
// name: k,
// value: item,
// linkOpt: 'or',
// builder: 'm_value_equal'
// });
// });
// add form OA焦祖春 把OR变成AND 因为是emapdatatable的初始条件，跟其他条件应该是AND关系 by jbxu 2019-05-06
querySetting.push({
name: k,
value: v,
linkOpt: 'AND',
builder: 'm_value_equal'
});
} else {
querySetting.push({
name: k,
value: v,
linkOpt: 'AND',
builder: 'equal'
});
}
}
});
if (originQuerySettingType === 'string') {
paramsObj.querySetting = JSON.stringify(querySetting);
}
return instance[options](paramsObj, callback);
}
//存在初始化参数，携带初始化参数调用方法
if (initParams) {
return instance[options](paramsObj, callback);
}
//直接使用传参
return instance[options](params, callback);
}
return this;
};调用
- 根据id或class获取jquery对象：var $obj = $("#contanier");
- 由于事先通过$.fn.method()=function(){}，把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法；即$obj对象内部已经附带了这些方法了；在这里是$.fn.emapdatatable= function(options, params, callback, flag)。
- 调用jquery对象$obj中的emapdatatable方法，并且传入参数，进行表格的初始化
//$.fn.emapdatatable= function(options, params, callback, flag) $obj.emapdatatable({"这里是参数集对象"}); //参数集：初始化时参数及对应着options var options = { pagePath: ROOT_PATH + pageUrl + ".do", height: null, minLineNum: (lineNum == undefined) ? 10 : lineNum, params: (params == undefined) ? {} : params, action: actionName, pageable: (pageable == false) ? false : true, sortable: (sortable == true) ? true : false, customColumns: (customColumns == undefined) ? [] : customColumns, selectionMode: selectionMode ? selectionMode : 'custom', onceParams: (onceParams == undefined) ? {} : onceParams, enableBrowserSelection: true, fastRender: true, rendered: renderedFunction, pageSizeOptions: (pageSizeOptions == undefined) ? [10, 20, 50, 100] : pageSizeOptions, pageSize: (pageSize == undefined) ? 10 : pageSize };//默认参数集 $.fn.emapdatatable.defaults = { width: '100%', height: height, pageable: true, pagerMode: 'advanced', serverProcessing: true, pageSizeOptions: ['10', '20', '50', '100'], localization: localization, sortable: false, columnsReorder: false, selectionMode: "custom", enableBrowserSelection: true, incrementalSearch: false, columnsResize: true, defaultParams: false, onceParams: false, colHasMinWidth: true, // 列宽是否有默认最小值100px beforeSend: null, contextPath: '', // schema: true, // 启用schema，必须定义 contextPath && 未定义contextPath时 schema 不生效 minLineNum: null, alwaysHide: ['WID', 'TBRQ', 'TBLX', 'CZRQ', 'CZZ', 'CZZXM'], // 自定义显示列的隐藏字段 fastRender: false, canEdit: true, isCellEditable: null, isEditMode: false, editPageable: false, isOnceEmpty: false, mustSelect: true, defaultCellsRenderer: undefined, customOptions: null, saveSchemaCallback: null };
示例
/**
* @memberof module:emapdatatable
* @description 其他参数参考jqxDatatable{@link http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm?search=}
* @prop {String} [pk=WID] - 数据主键字段
* @prop {String} [url] - 请求表格数据的后台接口, url和pagePath二选一必填
* @prop {String} [pagePath] - 请求表格数据页面地址, url和pagePath二选一必填
* @prop {Object} params - 请求参数
* @prop {Array} datamodel - 一般为emap返回的数据模型
* @prop {String} action - emap动作名
* @prop {Array} customColumns - 自定义表格列,colIndex:该自定义位于表格第几列，从0开始，最后一列可以设置‘last’； colField: 自定义列作用的列模型字段； type: 自定义列类型，支持checkbox，link，tpl。chekcbox不可定义colField参数，如果定义了colIndex，则customColumns数组必须按照colIndex值由小到大排序
* @prop {Object} replaceColumns - 现有列属性替换，该对象中的key对应模型的name属性，值对应jqwidget datatable column属性，如：{"XH":{sortable:true}}，下面有示例代码
* @prop {Int|Stirng} [height] - 高度
* @prop {Boolean} [pageable=true] - 是否分页
* @prop {String} [pagerMode=advanced] - 分页形式 'advanced' 'simple'
* @prop {Boolean} [serverProcessing=true] - 是否开启服务端分页
* @prop {Array} [pageSizeOptions=['10', '20', '50', '100']] - 分页条数选项
* @prop {String} [localization='zh-CN'] - 语言选择
* @prop {Boolean} [sortable=false] - 排序
* @prop {String} [selectionMode='custom'] - Sets or gets the selection mode. Possible values: "multipleRows", "singleRow" and "custom". In the "custom" mode, rows could be selected/unselected only through the API.
* @prop {Boolean} [enableBrowserSelection=true] - Enables or disables the default text selection of the web browser.
* @prop {Boolean} [columnsResize=true] - Sets or gets the jqxDataTable's columnsResize.
* @prop {Boolean} [colHasMinWidth=true] - 列宽是否有默认最小值100px
* @prop {Boolean} [schema=true] - 启用schema，必须定义 contextPath && 未定义contextPath时 schema 不生效
* @prop {String} [contextPath] - 根路径
* @prop {Int} [minLineNum] - 最小高度行数
* @prop {Boolean} [fastRender=false] - 快速渲染， 用于提高表格渲染速度
* @prop {Function} [beforeSend] - 请求发送前的回调函数
* @prop {Function} [downloadComplete] - 表格数据请求完成的回调
* @prop {Boolean} [isOnceEmpty=false] - 表格默认是否为空，不加载数据
* @prop {Boolean} [mustSelect=true] - 自定义显示列弹窗是否开启必须勾选字段校验
* @prop {Boolean} [columnsReorder=false] - 是否开启列拖拽排序
* @prop {Function} [customOptions] - 初始化表格的options，允许干预
* @prop {Boolean} [fxss] - 是否开启开启防跨站脚本攻击，默认与WIS_EMAP_CONFIG['emapdatatable.fxss']相同
* @prop {Function} [defaultCellsRenderer] - 这是一个同步函数，设置该函数将会忽略默认渲染，必须返回一个字符串。函数的入参：row, column, value, rowData, colModel, settings
* @example
*/
$el.emapdatatable({
pagePath: bs.api.pageModel,
action: 'T_PXXX_XSJBXX_QUERY',
customColumns: [{
colIndex: '0',
type: 'checkbox'
}],
sortable:true,
replaceColumns:{
"XH":{
sortable:true,
cellsRenderer: function(row, column, value, rowData){
console.log(111)
return value;
}
}
},
customOptions: function(jqxOptions) {
return jqxOptions;
}
});new Plugin实例化插件，并缓存在dom结构里（内存里）
① return $(this).data('emapdatatable', new Plugin(this, options));
② new Plugin(this, options);
//this指代当前dom对象
//options代表当前传入的setting参数集
//由new操作符，构造函数，得到新的实例，
var _dataTable_Instance = new Plugin(this, options);
new Plugin
(function() {
var Plugin;
var editedBg = 'cell-edited';
var toDeleteKey = 'isToDelete';
var toDeleteLine = 'to-delete-line';
var showToDeleteLine = 'show-to-delete';
/**
* @module emapdatatable
* @alias 表格
* @description 数据表格
*/
Plugin = (function() {
function Plugin(element, options) ==>调用_create()生成表格
//供调用的方法
Plugin.prototype.reload
Plugin.prototype.reloadFirstPage
Plugin.prototype.checkedRecords
Plugin.prototype.checkedRowsIndex
Plugin.prototype.getTotalRecords
Plugin.prototype.getResult
Plugin.prototype.getRowsData
Plugin.prototype.getSort
Plugin.prototype.getModel
//插件的私有方法
function _create(instance)
function bindingComplete(instance, event)
function _resetPageFooter(instance)
function _handleHorizontalScrollBar(instance)
function _handleVerticalScrollBar(instance)
function _handleMinHeight(instance)
function _initSchema(instance, modelName, contextPath)
function _handleSortStyle(instance)
function _convertEditModeCols(columns, newmodel)
function _genColums(instance, jqxOptions, custom_ready, custom_rendered)
function hideLoading(instance)
function _scenesTableContentCheckboxClick($input, instance)
//默认setting参数集
$.fn.emapdatatable.defaults
)}.call(this);
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
