学习基于jQuery的FlexiGrid工具 (一)

2014-11-24 01:40:17 · 作者: · 浏览: 11

/*

* Flexigrid for jQuery - v1.1

*

* Copyright (c) 2008 Paulo P. Marinas (code.google.com/p/flexigrid/)

* Dual licensed under the MIT or GPL Version 2 licenses.

* http://jquery.org/license

*

*/

(function ($) {

$.addFlex = function (t, p) {

if (t.grid) return false; //return if already exist

p = $.extend({ //apply default properties

height: 200, //default height

width: 'auto', //auto width

striped: true, //apply odd even stripes

novstripe: false,

minwidth: 30, //min width of columns

minheight: 80, //min height of columns

resizable: true, //allow table resizing

url: false, //URL if using data from AJAX

method: 'POST', //data sending method

dataType: 'xml', //type of data for AJAX, either xml or json

errormsg: 'Connection Error',

usepager: false,

nowrap: true,

page: 1, //current page

total: 1, //total pages

useRp: true, //use the results per page select box

rp: 15, //results per page

rpOptions: [10, 15, 20, 30, 50], //allowed per-page values

title: false,

pagestat: 'Displaying {from} to {to} of {total} items',

pagetext: 'Page',

outof: 'of',

findtext: 'Find',

procmsg: 'Processing, please wait ...',

query: '',

qtype: '',

nomsg: 'No items',

minColToggle: 1, //minimum allowed column to be hidden

showToggleBtn: true, //show or hide column toggle popup

hideOnSubmit: true,

autoload: true,

blockOpacity: 0.5,

preProcess: false,

onDragCol: false,

onToggleCol: false,

onChangeSort: false,

onSuccess: false,

onError: false,

onSubmit: false //using a custom populate function

}, p);

$(t).show() //show if hidden

.attr({

cellPadding: 0,

cellSpacing: 0,

border: 0

}) //remove padding and spacing

.removeAttr('width'); //remove width properties

//create grid class

var g = {

hset: {},

rePosDrag: function () {

var cdleft = 0 - this.hDiv.scrollLeft;

if (this.hDiv.scrollLeft > 0) cdleft -= Math.floor(p.cgwidth / 2);

$(g.cDrag).css({

top: g.hDiv.offsetTop + 1

});

var cdpad = this.cdpad;

$('div', g.cDrag).hide();

$('thead tr:first th:visible', this.hDiv).each(function () {

var n = $('thead tr:first th:visible', g.hDiv).index(this);

var cdpos = parseInt($('div', this).width());

if (cdleft == 0) cdleft -= Math.floor(p.cgwidth / 2);

cdpos = cdpos + cdleft + cdpad;

if (isNaN(cdpos)) {

cdpos = 0;

}

$('div:eq(' + n + ')', g.cDrag).css({

'left': cdpos + 'px'

}).show();

cdleft = cdpos;

});

},

fixHeight: function (newH) {

newH = false;

if (!newH) newH = $(g.bDiv).height();

var hdHeight = $(this.hDiv).height();

$('div', this.cDrag).each(

function () {

$(this).height(newH + hdHeight);

}

);

var nd = parseInt($(g.nDiv).height());

if (nd > newH) $(g.nDiv).height(newH).width(200);

else $(g.nDiv).height('auto').width('auto');

$(g.block).css({

height: newH,

marginBottom: (newH * -1)

});

var hrH = g.bDiv.offsetTop + newH;

if (p.height != 'auto' && p.resizable) hrH = g.vDiv.offsetTop;

$(g.rDiv).css({

height: hrH

});

},

dragStart: function (dragtype, e, obj) { //default drag function start

if (dragtype == 'colresize') {//column resize

$(g.nDiv).hide();

$(g.nBtn).hide();

var n = $('div', this.cDrag).index(obj);

var ow = $('th:vi