Because our company's products involve a lot of tabular data display, and each table has a lot of fields, in the work process (several colleagues of the efforts), integrated a set of more lightweight plans. As shown in figure:
Defining global namespaces
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 of the destination element and then render out of 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 = $ (' <ul class= ' pages ></ul> ');
Add in the previous and Next buttons
$pager. Append (Renderbutton (' |< ', pagenumber, PageCount, Buttonclickcallback)). Append (' << ', PageNumber, PageCount, Buttonclickcallback));
Pager currently only handles viewable pages (could to 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 = $ (' <li class= ' page-number ' > ' + (page) + ' </li> ');
page = = pagenumber? Currentbutton.addclass (' pgcurrent '): Currentbutton.click (function () {buttonclickcallback (this.firstChild.data);});
Currentbutton.appendto ($pager);
}
Render in the next and last buttons before returning whole rendered.
$pager. Append (Renderbutton (' >> ', pagenumber, PageCount, Buttonclickcallback)). Append (Renderbutton (' >| '), PageNumber, PageCount, Buttonclickcallback));
$pager. Append (' <li class= "Pgnone" > Total "+ pagecount +" page </li> ");
if (rowcount!= undefined) {
$pager. Append (' <li class= "Pgnone" > Total ' + rowcount + "record, showing up to 600 </li>");
// }
if (rowcount!= undefined) {
$pager. Append (' <li class= "Pgtext" > ' + RowCount + ' record </li> ');
}
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 = $ (' <li class= "Pgnext" > ' + buttonlabel + ' </li> ');
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 ' grey ' 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 features: Mouse over the specified target pop-up drop-down box--by Flowerszhong
Parameter description:
Target: Event object ID
Box: dropdown Box ID
Left: offset by the top coordinate of the event object, defaults to 0;
Top: Offset from the top coordinate of the event object, default to the height of the event object
Overclass: Current status table row keep highlighting style
On: Does the pop-up box have arrows
Arrow: auto-adjust pointing arrows
================================================================
*/
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, prevents the select control from masking the Drop-down box
if ($.browser.msie && $.browser.version = "6.0") {
if (flag) {
$ ("select"). CSS ("Visibility", "visible");
} else {
$ ("select"). CSS ("visibility", "hidden");
}
}
};
$ (window). Resize (function () {
w = $ (window). Height ();
offset = Obj.offset ();
});
$ ("#arrow"). Click (function () {
offset = Obj.offset ();
});
Binding mouseover Events
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 ("div") [0];
var arrtop = + 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 ("div") [0];
$ (arrow). CSS ("Top", "35px");
}
}
B.bind ("MouseOver", function (event) {
$ (this). Show ();
SelectSet (FALSE);
if (overclass) {p.addclass (overclass);}
Event.stoppropagation (); Block event bubbling
});
B.bind ("Mouseout", function (event) {
$ (this). Hide ();
SelectSet (TRUE);
if (overclass) {p.removeclass (overclass);}
Event.stoppropagation (); Block event bubbling
});
if (overclass) {p.addclass (overclass);}
SelectSet (FALSE);
});
Binding Mouseout Events
Obj.bind ("Mouseout", function () {
B.CSS ("Display", "none");
SelectSet (TRUE);
if (overclass) {p.removeclass (overclass);}
});
Debugger
};
GLOBAL.zyh.dropbox = Dropbox;
/*
================================================================
Features: Toggle column Table Custom columns common method, based on Jquery.columnmanager components, GLOBAL.zyh.dropbox components
Parameter description:
Targettable: Form ID
ColumnManagerArgument:jquery.columnmanager Need parameters
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.targettable). Columnmanager (settings.columnmanagerargument);
GLOBAL.zyh.dropbox (Settings.btnsetcolumn, settings.targetfive, Settings.left, settings.top);
}
