jquery 外掛程式開發

2021-07-11 06:48:08 字數 3225 閱讀 9092

因為公司用到了自己定義的列表展示,於是看了看實現的方法,發現,是在jquery上,進行了外掛程式開發。

下面的**是在使用外掛程式,渲染集合列表。

$('#table_report').datatable();

},"fnserverdata" : editorial.product.productinfo.retrievedata,

"fndrawcallback" : function(osettings)

},"aocolumns" : [ , else

}} ],

// 多語言配置

"olanguage" :

} });

下面的**是在乙個js檔案中,開發的jquery外掛程式。××

×××先貼全部**,然後再解釋。

(function($) ;

this.fngetdata = function(refer) else

if (refer > -1) else }};

this.fnadddata = function(rowdata) else

for ( var i in _data)

};this.fnupdate = function(rowdata, index) );

};this.fndeleterow = function(refer)

};this.fninsertrow = function(index, rowdata) );

};this.fnsetcolumnvis = function(searcher, isshow) else if (isshow === false)

};this.fnsettings = function() ;

};this.getfield = function(searcher)

return interial.newgrid.datagrid("getcolumnoption", searcher);

};this.fncleartable = function() );

};this.fngetposition = function(refer) else

};this.load = function() ;

this.reload = function() ;

this.getchecked = function() ;

this.fngetnodes = function(refer) );

if (refer != null)

if (refer > -1)

}return elrows;

};this.fngetfooternodes = function() );

return elrows;

};

**********************************分割點××××××××××××××××××××××
interial.getqueryparams = function() ;

if ($.isfunction(setting.fnserverparams)) }}

return queryparams;

};var _id = self.attr("id");

var columns = , _ths = self.find("thead th"), _columns = setting.aocolumns;

if (_ths.length != _columns.length)

for (var i = 0; i < _columns.length; i++)

if (_title != null)

}if (_dataprop == null)

if (_fnrender != null)

if (_bsortable !== true)

interial.aocolumns.push(

var _rowno = 0;

if (this.title == "序號" || (this.title.tolowercase() == "id"))

value = jsonddl.get(row, this.field, true);

if ($.isfunction(this.fnrender)) );

} else else }},

sortable : _bsortable

});}

self.css();

interial.newgrid = $(self).datagrid();

for (var i = 0; i < _columns.length; i++)

if ($.isfunction(dblclickfn) === true)

} }; $.fn.datatable = function(_setting) ;

})(jquery);

分割點上面部分,是,可以通過呼叫這個.datatable,中的其他一些自定義方法,來對這個集合列表進行操作,比如,

刪除某一行操作,fndeleterow

增加一行 的操作,fninsertrow

分割點一下的,就是渲染集合列表的具體操作了。

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

去掉所有的業務邏輯**,只剩下最簡單的。

(function($) ;

$.fn.datatable = function(_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物件新增方法。

所以,就這麼簡單;

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...

jquery 外掛程式開發

自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...

jquery 外掛程式開發

jquery外掛程式開發一般通過兩種框架方式 一種是在jquery物件上直接定義新成員,形成外掛程式 另一種是封裝完整的外掛程式 然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功...