Because our company's products involve a lot of table data display, and each table has a large number of fields, in the course of work (several colleagues' efforts ), A set of self-considered lightweight solutions to display table data involves some things, such as field display hiding, data status, paging, and so on.
Because our company's products involve a lot of table data display, and each table has a large number of fields, in the course of work (several colleagues' efforts ), integrate a set of self-considered lightweight solutions.
The plug-ins involved mainly include:
JQuery. columnmanager. expand. js (Extended columnmanager)
JQuery. dropbox. js (self-written)
JQuery. pager. expand. js (Extended pager)
JQuery. cookie. js
Among them, pager. expand. js, dropbox. js, and plug-ins are integrated in common. js. The Code is as follows:
The Code is as follows:
// Define a global namespace
Var GLOBAL = {};
GLOBAL. Namespace = function (str ){
Var arr = str. split ("."), o = GLOBAL;
For (var I = (arr [0] = 'global ')? 1: 0; I <arr. length; I ++ ){
O [arr [I] = o [arr [I] || {};
O = o [arr [I];
}
}
GLOBAL. Namespace ("zyh ");
/*
**************************************** **************************
JQuery. pager
**************************************** **************************
*/
(Function ($ ){
$. Fn. pager = function (options ){
Var opts = $. extend ({}, $. fn. pager. defaults, options );
Return this. each (function (){
// Empty out the destination element and then render out the pager with the supplied options
$ (This). empty (). append (renderpager (parseInt (options. pagenumber), parseInt (options. pagecount), options. buttonClickCallback, options. rowcount ));
// Specify correct cursor activity
// $ ('. Pages li '). mouseover (function () {document. body. style. cursor = "pointer ";}). mouseout (function () {document. body. style. cursor = "auto ";});
});
};
// Render and return the pager with the supplied options
Function renderpager (pagenumber, pagecount, buttonClickCallback, rowcount ){
// Setup $ pager to hold render
Var $ pager = $ ('
');
// Add in the previous and next buttons
$ Pager. append (renderButton ('| <', pagenumber, pagecount, buttonClickCallback). append (renderButton ('<', pagenumber, pagecount, buttonClickCallback ));
// Pager currently only handles 10 viewable pages (cocould be easily parameterized, maybe in next version) so handle edge cases
Var startPoint = 1;
Var endPoint = 6;
If (pagenumber> 3 ){
StartPoint = pagenumber-3;
EndPoint = pagenumber + 3;
}
If (endPoint> pagecount ){
StartPoint = pagecount-5;
EndPoint = pagecount;
}
If (startPoint <1 ){
StartPoint = 1;
}
// Loop thru visible pages and render buttons
For (var page = startPoint; page <= endPoint; page ++ ){
Var currentButton = $ ('
'+ (Page) +'');
Page = pagenumber? CurrentButton. addClass ('pgcurrent'): currentButton. click (function () {buttonClickCallback (this. firstChild. data );});
CurrentButton. appendTo ($ pager );
}
// Render in the next and last buttons before returning the whole rendered control back.
$ Pager. append (renderButton ('>', pagenumber, pagecount, buttonClickCallback). append (renderButton ('> |', pagenumber, pagecount, buttonClickCallback ));
$ Pager. append ('
Total '+ pagecount + "Page");
// If (rowcount! = Undefined ){
// $ Pager. append ('
A total of '+ rowcount + "records, up to 600 records can be displayed");
//}
If (rowcount! = Undefined ){
$ Pager. append ('
'+ Rowcount +' records');
}
Return $ pager;
}
// Renders and returns a 'specialized' button, ie 'Next', 'previous' etc. rather than a page number button
Function renderButton (buttonLabel, pagenumber, pagecount, buttonClickCallback ){
Var $ Button = $ ('
'+ ButtonLabel +'');
Var destPage = 1;
// Work out destination page for required button type
Switch (buttonLabel ){
Case "| <":
DestPage = 1;
Break;
Case "<":
DestPage = pagenumber-1;
Break;
Case "> ":
DestPage = pagenumber + 1;
Break;
Case "> | ":
DestPage = pagecount;
Break;
}
// Disable and 'Gray 'out buttons if not needed.
If (buttonLabel = "| <" | buttonLabel = "<"){
Pagenumber <= 1? $ Button. addClass ('pgempty'): $ Button. click (function () {buttonClickCallback (destPage );});
}
Else {
Pagenumber> = pagecount? $ Button. addClass ('pgempty'): $ Button. click (function () {buttonClickCallback (destPage );});
}
Return $ Button;
}
// Pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
$. Fn. pager. defaults = {
Pagenumber: 1,
Pagecount: 1
};
}) (JQuery );
/*
========================================================== ======================================
// Component function: move the mouse up and specify the target pop-up drop-down box -- by flowerszhong
// Parameter description:
// Target: event object Id
// Box: drop-down box Id
// Left: The left offset of the top coordinate of the event object. The default value is 0;
// Top: offset from the top coordinate of the event object. The default value is the height of the event object.
// OverClass: the current table row remains highlighted.
// On: whether there is an arrow in the pop-up box
// Arrow: the arrow pointing to the automatic adjustment.
========================================================== ======================================
*/
Var dropbox = function (target, box, left, top, overClass, on, hasArrow ){
Var obj, B, p;
If (typeof target = "object ")
Obj = $ (target );
Else
Obj = $ ("#" + target );
If (typeof box = "object ")
B = $ (box );
Else
B = $ ("#" + box );
P = obj. parent ();
If (top = "undefined") top = obj. height ();
Var defaults = {
L: left | 0,
T: top | 0,
OverClass: overClass | "",
On: on | "",
HasArrow: hasArrow | ""
},
Offset = obj. offset (),
W = $ (window). height (),
SelectSet = function (flag ){
// In IE6, prevent the select control from masking the drop-down box
If ($. browser. msie & $. browser. version = "6.0 "){
If (flag ){
$ ("Select" example .css ("visibility", "visible ");
} Else {
$ ("Select" example .css ("visibility", "hidden ");
}
}
};
$ (Window). resize (function (){
W = $ (window). height ();
Offset = obj. offset ();
});
$ ("# Arrow"). click (function (){
Offset = obj. offset ();
});
// Bind a mouseover event
Obj. bind ("mouseover", function (){
Var diff, arrow, scrollTop;
ScrollTop = $ (window). scrollTop ();
Diff = w-(offset. top-scrollTop );
If (on & diff <145 ){
Var subTop = 145-diff;
B .css ({"display": "block", "left": offset. left + defaults. l + "px", "top": offset. top + defaults. t-subTop + "px "});
If (hasArrow ){
Arrow = B. children ("p") [0];
Var arrTop = 35 + subTop;
((Arrow).css ("top", arrTop );
}
} Else {
B .css ({"display": "block", "left": offset. left + defaults. l + "px", "top": offset. top + defaults. t + "px "});
If (hasArrow ){
Arrow = B. children ("p") [0];
((Arrow).css ("top", "35px ");
}
}
B. bind ("mouseover", function (event ){
$ (This). show ();
SelectSet (false );
If (overClass) {p. addClass (overClass );}
Event. stopPropagation (); // prevents event bubbles
});
B. bind ("mouseout", function (event ){
$ (This). hide ();
SelectSet (true );
If (overClass) {p. removeClass (overClass );}
Event. stopPropagation (); // prevents event bubbles
});
If (overClass) {p. addClass (overClass );}
SelectSet (false );
});
// Bind a mouseout event
Obj. bind ("mouseout", function (){
B .css ("display", "none ");
SelectSet (true );
If (overClass) {p. removeClass (overClass );}
});
// Debugger;
};
GLOBAL. zyh. dropbox = dropbox;
/*
========================================================== ======================================
// Function: General method for customizing columns in Toggle Column table, based on jquery. columnmanager component and GLOBAL. zyh. dropbox component
// Parameter description:
// TargetTable: Table Id
// ColumnManagerArgument: parameters required by jquery. columnmanager
// BtnSetColumn:
// Targetfive:
// Left: 0
// Top: 0
========================================================== ======================================
*/
GLOBAL. zyh. toggleTableColumn = function (options ){
Var defaults = {
TargetTable :'',
ColumnManagerArgument :{},
BtnSetColumn :'',
Targetfive :'',
Left: 0,
Top: 0
}
Var settings = $. extend ({}, defaults, options );
$ ('#' + Settings.tar getTable). columnManager (settings. columnManagerArgument );
GLOBAL. zyh. dropbox (settings. btnSetColumn, settings.tar getfive, settings. left, settings. top );
}
