jquery 插件开发

因为公司用到了自己定义的列表展示，于是看了看实现的方法，发现，是在jquery上，进行了插件开发。

下面的代码是在使用插件，渲染集合列表。

$('#table_report').dataTable({"bFilter" : false, // 开关，是否启用客户端过滤器"bProcessing" : true, // 当datatable获取数据时候是否显示正在处理提示信息。"bAutoWidth" : false, // 自适应宽度"sPaginationType" : "full_numbers", // 分页样式"bServerSide" : true, // 从服务器端取数据"sAjaxSource" : $('#ctx').val() + "/pages/product/form/managers?flag="+$('#flag').val(), // mvc后台ajax调用接口。"fnServerParams" : function(aoData) {aoData.push({"name" : "code","value" : $("#query_module_code").val()});},"fnServerData" : Editorial.Product.ProductInfo.retrieveData,"fnDrawCallback" : function(oSettings) {for ( var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {$('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + oSettings._iDisplayStart + 1);}},"aoColumns" : [ {"sTitle" : "序号","mDataProp" : "id",    "bSortable": false}, {"sTitle" : "操作","mData" : null,    "bSortable": false,"aTargets" : [ -1 ],// 自定义列的样式"fnRender" : function(oObj) {var start = '<div class="hidden-phone visible-desktop btn-group">';var edit = '<button class="btn btn-mini btn-warning" title="修改" onclick="Editorial.Product.ProductInfo.editObj(\'' + oObj.aData.id + '\', \'' + oObj.aData.productType.code + '\')"><i class="icon-edit bigger-120"></i></button>';var save = '<button class="btn btn-mini btn-warning" title="查看" onclick="Editorial.Product.ProductInfo.editObj(\'' + oObj.aData.id + '\', \'' + oObj.aData.productType.code + '\')"><i class="icon-edit bigger-120"></i></button>';var ruku = '<button class="btn btn-mini btn-warning" title="入库管理" onclick="Editorial.Product.ProductInfo.ruku(\'' + oObj.aData.id + '\')"><i class="icon-edit bigger-120"></i></button>';var chuku = '<button class="btn btn-mini btn-warning" title="出库管理" onclick="Editorial.Product.ProductInfo.chuku(\'' + oObj.aData.id + '\')"><i class="icon-edit bigger-120"></i></button>';var edit2 = '<button class="btn btn-mini " title="变更" onclick="Editorial.Product.ProductInfo.editObj2(\'' + oObj.aData.id + '\', \'' + oObj.aData.productType.code + '\', \''+'change'+'\')"><i class="icon-off bigger-120"></i></button>';var end = '</div>';if($('#flag').val().trim() == 'app'){return start +save +edit + end;} else {return start+save+ruku+chuku+edit2/*+edit4+edit5+edit6+edit7+edit8+edit9+edit1+edit10+edit11+edit13+edit14+edit15+edit16+edit17+edit18+edit19+edit20+edit21*/+ end;}}} ],// 多语言配置"oLanguage" : {"sProcessing" : "正在加载中......","sLengthMenu" : "每页显示 _MENU_ 条记录","sZeroRecords" : "对不起，查询不到相关数据！","sEmptyTable" : "表中无数据存在！","sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录","sInfoFiltered" : "数据表中共为 _MAX_ 条记录","sSearch" : "搜索","oPaginate" : {"sFirst" : "首页","sPrevious" : "上一页","sNext" : "下一页","sLast" : "末页"}}});

下面的代码是在一个JS文件中，开发的JQuery插件。

×

×
×

×

×

×

先贴全部代码，然后再解释。

(function($) {var IngentaGrid = function(self, setting) {var interial = {newGrid : null,aoColumns : [],originalElement : self.get(0)};this.fnGetData = function(refer) {var rowsData = interial.newGrid.datagrid("getRows");if (refer === undefined) {return rowsData;} else {if (!Number.isNumber(refer)) {refer = this.fnGetPosition(refer);}if (refer > -1) {return rowsData[refer];} else {return null;}}};this.fnAddData = function(rowData) {var _data = [];if ($.isArray(rowData)) {_data = rowData;} else {_data.push(rowData);}for ( var i in _data) {interial.newGrid.datagrid("appendRow", _data[i]);}};this.fnUpdate = function(rowData, index) {interial.newGrid.datagrid("updateRow", {index : index,row : rowData});};this.fnDeleteRow = function(refer) {var pos = this.fnGetPosition(refer);if (pos > -1) {interial.newGrid.datagrid("deleteRow", pos);}};this.fnInsertRow = function(index, rowData) {interial.newGrid.datagrid("insertRow", {index : index,row : rowData});};this.fnSetColumnVis = function(searcher, isShow) {searcher = this.getField(searcher).field;if (isShow === true) {interial.newGrid.datagrid("showColumn", searcher);} else if (isShow === false) {interial.newGrid.datagrid("hideColumn", searcher);}};this.fnSettings = function() {return {aoColumns : interial.aoColumns};};this.getField = function(searcher) {if (Number.isNumber(searcher)) {searcher = interial.aoColumns[searcher].field;}return interial.newGrid.datagrid("getColumnOption", searcher);};this.fnClearTable = function() {interial.newGrid.datagrid("loadData", {total : 0,rows : []});};this.fnGetPosition = function(refer) {var tr = $(refer).closest("tr");if (tr.size() > 0) {return tr.get(0).rowIndex;} else {return -1;}};this.load = function() {interial.newGrid.datagrid("load", interial.getQueryParams());};this.reload = function() {interial.newGrid.datagrid("reload", interial.getQueryParams());};this.getChecked = function() {var checkedRows = interial.newGrid.datagrid("getChecked");return checkedRows;};this.fnGetNodes = function(refer) {var originalDataGrid = $.data(interial.originalElement, "datagrid");var elRows = [];originalDataGrid.dc.body2.find("tr").each(function(i, o) {elRows.push(o);});if (refer != null) {if (!Number.isNumber(refer)) {refer = this.fnGetPosition(refer);}if (refer > -1) {return elRows[refer];}}return elRows;};this.fnGetFooterNodes = function() {var originalDataGrid = $.data(interial.originalElement, "datagrid");var elRows = [];originalDataGrid.dc.footer2.find("tr").each(function(i, o) {elRows.push(o);});return elRows;};

**********************************分割点××××××××××××××××××××××

interial.getQueryParams = function() {var queryParams = {};if ($.isFunction(setting.fnServerParams)) {var paramsContainer = [];setting.fnServerParams.call(setting.fnServerParams, paramsContainer);for (var i in paramsContainer) {if (paramsContainer[i].value != null) {JSONDDL.set(queryParams, paramsContainer[i].name, paramsContainer[i].value, true);}}}return queryParams;};var _id = self.attr("id");var columns = [], _ths = self.find("thead th"), _columns = setting.aoColumns;if (_ths.length != _columns.length) {alert("表格列数不匹配。"+_ths.length+","+_columns.length);return;}for (var i = 0; i < _columns.length; i++) {var _dataProp = _columns[i].mDataProp;var _title = _columns[i].sTitle;var _fnRender = _columns[i].fnRender;var _checkbox = _columns[i].checkbox;var _bSortable = _columns[i].bSortable;var _bVisible = _columns[i].bVisible;if (_bVisible == null) {_bVisible = true;_columns[i].bVisible = _bVisible;}if (_title != null) {if (_title.toLowerCase().indexOf("checkbox") > -1) {setting.singleSelect = false;}}if (_dataProp == null) {_dataProp = "TempColumn" + i;_columns[i].mDataProp = _dataProp;}if (_fnRender != null) {}if (_bSortable !== true) {_bSortable = false;_columns[i].bSortable = _bSortable;}interial.aoColumns.push({hidden : !_bVisible,checkbox : _checkbox,field : _dataProp,title : _title,width : _ths[i].width,align: _columns[i].align != null ? _columns[i].align : null,halign: _columns[i].halign != null ? _columns[i].halign : "center",fnRender : _fnRender,formatter : function(value, row, index) {if (this.title == null) {this.title = "";}var _rowNo = 0;if (this.title == "序号" || (this.title.toLowerCase() == "id")) {var _options = interial.newGrid.datagrid("options");_rowNo = (_options.pageNumber - 1) * _options.pageSize + index + 1;}value = JSONDDL.get(row, this.field, true);if ($.isFunction(this.fnRender)) {return this.fnRender.call(this, {aData : row,iDataRow : index,rowNo : _rowNo});} else {if (this.title == "序号" || (this.title.toLowerCase() == "id")) {return _rowNo;} else {return value;}}},sortable : _bSortable});}self.css({height : setting.height === undefined ? "310px" : setting.height,maxHeight : setting.maxHeight === undefined ? "310px" : setting.maxHeight});interial.newGrid = $(self).datagrid({//width : "100%",remoteSort : false,url : setting.sAjaxSource == null ? null : setting.sAjaxSource,columns : [ interial.aoColumns ],pagination : setting.bPaginate === false ? false : true,pageSize : 10,pageList : [10, 25, 50, 100],singleSelect : setting.singleSelect == false ? false : true,queryParams : interial.getQueryParams(),onLoadSuccess : setting.onLoadSuccess,onClickRow : setting.onClickRow,showFooter: true,rowStyler : setting.rowStyler});for (var i = 0; i < _columns.length; i++) {var _dataProp = _columns[i].mDataProp;var _td = $("tr.datagrid-header-row td[field="+ _dataProp.replace(/\./g, "\\.") +"]", self.parent());var clickFn = JSONDDL.get(_columns[i], "events.click", true);var dblclickFn = JSONDDL.get(_columns[i], "events.dblclick", true);_td.off();if ($.isFunction(clickFn) === true) {_td.on("click", clickFn);}if ($.isFunction(dblclickFn) === true) {_td.on("dblclick", dblclickFn);}}};$.fn.dataTable = function(_setting) {return new IngentaGrid(this, _setting);};})(jQuery);

分割点上面部分，是，可以通过调用这个.dataTable，中的其他一些自定义方法，来对这个集合列表进行操作，比如，

删除某一行操作，fnDeleteRow

增加一行 的操作，fnInsertRow

分割点一下的，就是渲染集合列表的具体操作了。

*******************再次分割************************

去掉所有的业务逻辑代码，只剩下最简单的。

(function($) {var IngentaGrid = function(self, setting) {};$.fn.dataTable = function(_setting) {return new IngentaGrid(this, _setting);};})(jQuery);

这个，就是，自定义插件，最基本的代码了。

而，$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 
那么你可以这样子：$("#div").abc(); 

jQuery为开发插件提拱了两个方法，分别是： 

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
jQuery.fn.extend(object);给jQuery对象添加方法。

所以，就这么简单；