/* * 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: 20, //results per page rpOptions: [50, 100, 200, 500], //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 Records Found', minColToggle: 0, //minimum allowed column to be hidden showToggleBtn: false, //show or hide column toggle popup hideOnSubmit: true, autoload: true, blockOpacity: 0.5, preProcess: false, onDragCol: false, onToggleCol: false, onChangeSort: false, onSuccess: function () { format_flexigrid(); }, onError: false, onSubmit: false //using a custom populate function }, p); $(t).show() //show if hidden .attr({ cellPadding: 0, cellSpacing: 0, border: 0, wrap:true }) //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:visible div:eq(' + n + ')', this.hDiv).width(); $(obj).addClass('dragging').siblings().hide(); $(obj).prev().addClass('dragging').show(); this.colresize = { startX: e.pageX, ol: parseInt(obj.style.left), ow: ow, n: n }; $('body').css('cursor', 'col-resize'); } else if (dragtype == 'vresize') {//table resize var hgo = false; $('body').css('cursor', 'row-resize'); if (obj) { hgo = true; $('body').css('cursor', 'col-resize'); } this.vresize = { h: p.height, sy: e.pageY, w: p.width, sx: e.pageX, hgo: hgo }; } else if (dragtype == 'colMove') {//column header drag $(g.nDiv).hide(); $(g.nBtn).hide(); this.hset = $(this.hDiv).offset(); this.hset.right = this.hset.left + $('table', this.hDiv).width(); this.hset.bottom = this.hset.top + $('table', this.hDiv).height(); this.dcol = obj; this.dcoln = $('th', this.hDiv).index(obj); this.colCopy = document.createElement("div"); this.colCopy.className = "colCopy"; this.colCopy.innerHTML = obj.innerHTML; if ($.browser.msie) { this.colCopy.className = "colCopy ie"; } $(this.colCopy).css({ position: 'absolute', float: 'left', display: 'none', textAlign: obj.align }); $('body').append(this.colCopy); $(this.cDrag).hide(); } $('body').noSelect(); }, dragMove: function (e) { if (this.colresize) {//column resize var n = this.colresize.n; var diff = e.pageX - this.colresize.startX; var nleft = this.colresize.ol + diff; var nw = this.colresize.ow + diff; if (nw > p.minwidth) { $('div:eq(' + n + ')', this.cDrag).css('left', nleft); this.colresize.nw = nw; } } else if (this.vresize) {//table resize var v = this.vresize; var y = e.pageY; var diff = y - v.sy; if (!p.defwidth) p.defwidth = p.width; if (p.width != 'auto' && !p.nohresize && v.hgo) { var x = e.pageX; var xdiff = x - v.sx; var newW = v.w + xdiff; if (newW > p.defwidth) { this.gDiv.style.width = newW + 'px'; p.width = newW; } } var newH = v.h + diff; if ((newH > p.minheight || p.height < p.minheight) && !v.hgo) { this.bDiv.style.height = newH + 'px'; p.height = newH; this.fixHeight(newH); } v = null; } else if (this.colCopy) { $(this.dcol).addClass('thMove').removeClass('thOver'); if (e.pageX > this.hset.right || e.pageX < this.hset.left || e.pageY > this.hset.bottom || e.pageY < this.hset.top) { //this.dragEnd(); $('body').css('cursor', 'move'); } else { $('body').css('cursor', 'pointer'); } $(this.colCopy).css({ top: e.pageY + 10, left: e.pageX + 20, display: 'block' }); } }, dragEnd: function () { if (this.colresize) { var n = this.colresize.n; var nw = this.colresize.nw; $('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw); $('tr', this.bDiv).each( function () { $('td:visible div:eq(' + n + ')', this).css('width', nw); } ); this.hDiv.scrollLeft = this.bDiv.scrollLeft; $('div:eq(' + n + ')', this.cDrag).siblings().show(); $('.dragging', this.cDrag).removeClass('dragging'); this.rePosDrag(); this.fixHeight(); this.colresize = false; } else if (this.vresize) { this.vresize = false; } else if (this.colCopy) { $(this.colCopy).remove(); if (this.dcolt != null) { if (this.dcoln > this.dcolt) $('th:eq(' + this.dcolt + ')', this.hDiv).before(this.dcol); else $('th:eq(' + this.dcolt + ')', this.hDiv).after(this.dcol); this.switchCol(this.dcoln, this.dcolt); $(this.cdropleft).remove(); $(this.cdropright).remove(); this.rePosDrag(); if (p.onDragCol) { p.onDragCol(this.dcoln, this.dcolt); } } this.dcol = null; this.hset = null; this.dcoln = null; this.dcolt = null; this.colCopy = null; $('.thMove', this.hDiv).removeClass('thMove'); $(this.cDrag).show(); } $('body').css('cursor', 'default'); $('body').noSelect(false); }, toggleCol: function (cid, visible) { var ncol = $("th[axis='col" + cid + "']", this.hDiv)[0]; var n = $('thead th', g.hDiv).index(ncol); var cb = $('input[value=' + cid + ']', g.nDiv)[0]; if (visible == null) { visible = ncol.hidden; } if ($('input:checked', g.nDiv).length < p.minColToggle && !visible) { return false; } if (visible) { ncol.hidden = false; $(ncol).show(); cb.checked = true; } else { ncol.hidden = true; $(ncol).hide(); cb.checked = false; } $('tbody tr', t).each( function () { if (visible) { $('td:eq(' + n + ')', this).show(); } else { $('td:eq(' + n + ')', this).hide(); } } ); this.rePosDrag(); if (p.onToggleCol) { p.onToggleCol(cid, visible); } return visible; }, switchCol: function (cdrag, cdrop) { //switch columns $('tbody tr', t).each( function () { if (cdrag > cdrop) $('td:eq(' + cdrop + ')', this).before($('td:eq(' + cdrag + ')', this)); else $('td:eq(' + cdrop + ')', this).after($('td:eq(' + cdrag + ')', this)); } ); //switch order in nDiv if (cdrag > cdrop) { $('tr:eq(' + cdrop + ')', this.nDiv).before($('tr:eq(' + cdrag + ')', this.nDiv)); } else { $('tr:eq(' + cdrop + ')', this.nDiv).after($('tr:eq(' + cdrag + ')', this.nDiv)); } if ($.browser.msie && $.browser.version < 7.0) { $('tr:eq(' + cdrop + ') input', this.nDiv)[0].checked = true; } this.hDiv.scrollLeft = this.bDiv.scrollLeft; }, scroll: function () { this.hDiv.scrollLeft = this.bDiv.scrollLeft; this.rePosDrag(); }, addData: function (data) { //parse data if (p.dataType == 'json') { data = $.extend({rows: [], page: 0, total: 0}, data); } if (p.preProcess) { data = p.preProcess(data); } $('.pReload', this.pDiv).removeClass('loading'); this.loading = false; if (!data) { $('.pPageStat', this.pDiv).html(p.errormsg); return false; } if (p.dataType == 'xml') { p.total = +$('rows total', data).text(); } else { p.total = data.total; } if (p.total == 0) { $('tr, a, td, div', t).unbind(); $(t).empty(); p.pages = 1; p.page = 1; this.buildpager(); $('.pPageStat', this.pDiv).html(p.nomsg); return false; } p.pages = Math.ceil(p.total / p.rp); if (p.dataType == 'xml') { p.page = +$('rows page', data).text(); } else { p.page = data.page; } this.buildpager(); //build new body var tbody = document.createElement('tbody'); if (p.dataType == 'json') { $.each(data.rows, function (i, row) { var tr = document.createElement('tr'); if (i % 2 && p.striped) { tr.className = 'erow'; } if (row.id) { tr.id = 'row' + row.id; } $('thead tr:first th', g.hDiv).each( //add cell function () { var td = document.createElement('td'); var idx = $(this).attr('axis').substr(3); td.align = this.align; // If the json elements aren't named (which is typical), use numeric order if (typeof row.cell[idx] != "undefined") { td.innerHTML = (row.cell[idx] != null) ? row.cell[idx] : '';//null-check for Opera-browser } else { td.innerHTML = row.cell[p.colModel[idx].name]; } $(td).attr('abbr', $(this).attr('abbr')); $(tr).append(td); td = null; } ); if ($('thead', this.gDiv).length < 1) {//handle if grid has no headers for (idx = 0; idx < cell.length; idx++) { var td = document.createElement('td'); // If the json elements aren't named (which is typical), use numeric order if (typeof row.cell[idx] != "undefined") { td.innerHTML = (row.cell[idx] != null) ? row.cell[idx] : '';//null-check for Opera-browser } else { td.innerHTML = row.cell[p.colModel[idx].name]; } $(tr).append(td); td = null; } } $(tbody).append(tr); tr = null; }); } else if (p.dataType == 'xml') { var i = 1; $("rows row", data).each(function () { i++; var tr = document.createElement('tr'); if (i % 2 && p.striped) { tr.className = 'erow'; } var nid = $(this).attr('id'); if (nid) { tr.id = 'row' + nid; } nid = null; var robj = this; $('thead tr:first th', g.hDiv).each(function () { var td = document.createElement('td'); var idx = $(this).attr('axis').substr(3); td.align = this.align; td.innerHTML = $("cell:eq(" + idx + ")", robj).text(); $(td).attr('abbr', $(this).attr('abbr')); $(tr).append(td); td = null; }); if ($('thead', this.gDiv).length < 1) {//handle if grid has no headers $('cell', this).each(function () { var td = document.createElement('td'); td.innerHTML = $(this).text(); $(tr).append(td); td = null; }); } $(tbody).append(tr); tr = null; robj = null; }); } $('tr', t).unbind(); $(t).empty(); $(t).append(tbody); this.addCellProp(); this.addRowProp(); this.rePosDrag(); tbody = null; data = null; i = null; if (p.onSuccess) { p.onSuccess(this); } if (p.hideOnSubmit) { $(g.block).remove(); } this.hDiv.scrollLeft = this.bDiv.scrollLeft; if ($.browser.opera) { $(t).css('visibility', 'visible'); } }, changeSort: function (th) { //change sortorder if (this.loading) { return true; } $(g.nDiv).hide(); $(g.nBtn).hide(); if (p.sortname == $(th).attr('abbr')) { if (p.sortorder == 'asc') { p.sortorder = 'desc'; } else { p.sortorder = 'asc'; } } $(th).addClass('sorted').siblings().removeClass('sorted'); $('.sdesc', this.hDiv).removeClass('sdesc'); $('.sasc', this.hDiv).removeClass('sasc'); $('div', th).addClass('s' + p.sortorder); p.sortname = $(th).attr('abbr'); if (p.onChangeSort) { p.onChangeSort(p.sortname, p.sortorder); } else { this.populate(); } }, buildpager: function () { //rebuild pager based on new properties $('.pcontrol input', this.pDiv).val(p.page); $('.pcontrol span', this.pDiv).html(p.pages); var r1 = (p.page - 1) * p.rp + 1; var r2 = r1 + p.rp - 1; if (p.total < r2) { r2 = p.total; } var stat = p.pagestat; stat = stat.replace(/{from}/, r1); stat = stat.replace(/{to}/, r2); stat = stat.replace(/{total}/, p.total); $('.pPageStat', this.pDiv).html(stat); }, populate: function () { //get latest data if (this.loading) { return true; } if (p.onSubmit) { var gh = p.onSubmit(); if (!gh) { return false; } } this.loading = true; if (!p.url) { return false; } $('.pPageStat', this.pDiv).html(p.procmsg); $('.pReload', this.pDiv).addClass('loading'); $(g.block).css({ top: g.bDiv.offsetTop }); if (p.hideOnSubmit) { $(this.gDiv).prepend(g.block); } if ($.browser.opera) { $(t).css('visibility', 'hidden'); } if (!p.newp) { p.newp = 1; } if (p.page > p.pages) { p.page = p.pages; } var param = [{ name: 'page', value: p.newp }, { name: 'rp', value: p.rp }, { name: 'sortname', value: p.sortname }, { name: 'sortorder', value: p.sortorder }, { name: 'query', value: p.query }, { name: 'qtype', value: p.qtype }]; if (p.params) { for (var pi = 0; pi < p.params.length; pi++) { param[param.length] = p.params[pi]; } } $.ajax({ type: p.method, url: p.url, data: param, dataType: p.dataType, success: function (data) { g.addData(data); }, error: function (XMLHttpRequest, textStatus, errorThrown) { try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) {} } }); }, doSearch: function () { p.query = $('input[name=q]', g.sDiv).val(); p.qtype = $('select[name=qtype]', g.sDiv).val(); p.newp = 1; this.populate(); }, changePage: function (ctype) { //change page if (this.loading) { return true; } switch (ctype) { case 'first': p.newp = 1; break; case 'prev': if (p.page > 1) { p.newp = parseInt(p.page) - 1; } break; case 'next': if (p.page < p.pages) { p.newp = parseInt(p.page) + 1; } break; case 'last': p.newp = p.pages; break; case 'input': var nv = parseInt($('.pcontrol input', this.pDiv).val()); if (isNaN(nv)) { nv = 1; } if (nv < 1) { nv = 1; } else if (nv > p.pages) { nv = p.pages; } $('.pcontrol input', this.pDiv).val(nv); p.newp = nv; break; } if (p.newp == p.page) { return false; } if (p.onChangePage) { p.onChangePage(p.newp); } else { this.populate(); } }, addCellProp: function () { $('tbody tr td', g.bDiv).each(function () { var tdDiv = document.createElement('div'); var n = $('td', $(this).parent()).index(this); var pth = $('th:eq(' + n + ')', g.hDiv).get(0); if (pth != null) { if (p.sortname == $(pth).attr('abbr') && p.sortname) { this.className = 'sorted'; } $(tdDiv).css({ textAlign: pth.align, width: $('div:first', pth)[0].style.width }); if (pth.hidden) { $(this).css('display', 'none'); } } if (p.nowrap == false) { $(tdDiv).css('white-space', 'normal'); } if (this.innerHTML == '') { this.innerHTML = ' '; } tdDiv.innerHTML = this.innerHTML; var prnt = $(this).parent()[0]; var pid = false; if (prnt.id) { pid = prnt.id.substr(3); } if (pth != null) { if (pth.process) pth.process(tdDiv, pid); } $(this).empty().append(tdDiv).removeAttr('width'); //wrap content }); }, getCellDim: function (obj) {// get cell prop for editable event var ht = parseInt($(obj).height()); var pht = parseInt($(obj).parent().height()); var wt = parseInt(obj.style.width); var pwt = parseInt($(obj).parent().width()); var top = obj.offsetParent.offsetTop; var left = obj.offsetParent.offsetLeft; var pdl = parseInt($(obj).css('paddingLeft')); var pdt = parseInt($(obj).css('paddingTop')); return { ht: ht, wt: wt, top: top, left: left, pdl: pdl, pdt: pdt, pht: pht, pwt: pwt }; }, addRowProp: function () { $('tbody tr', g.bDiv).each(function () { $(this).click(function (e) { var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true; $(this).toggleClass('trSelected'); if (p.singleSelect) $(this).siblings().removeClass('trSelected'); }).mousedown(function (e) { if (e.shiftKey) { $(this).toggleClass('trSelected'); g.multisel = true; this.focus(); $(g.gDiv).noSelect(); } }).mouseup(function () { if (g.multisel) { g.multisel = false; $(g.gDiv).noSelect(false); } }).hover(function (e) { if (g.multisel) { $(this).toggleClass('trSelected'); } }, function () {}); if ($.browser.msie && $.browser.version < 7.0) { $(this).hover(function () { $(this).addClass('trOver'); }, function () { $(this).removeClass('trOver'); }); } }); }, pager: 0 }; if (p.colModel) { //create model if any thead = document.createElement('thead'); var tr = document.createElement('tr'); for (var i = 0; i < p.colModel.length; i++) { var cm = p.colModel[i]; var th = document.createElement('th'); th.innerHTML = cm.display; if (cm.name && cm.sortable) { $(th).attr('abbr', cm.name); } $(th).attr('axis', 'col' + i); if (cm.align) { th.align = cm.align; } if (cm.width) { $(th).attr('width', cm.width); } if ($(cm).attr('hide')) { th.hidden = true; } if (cm.process) { th.process = cm.process; } $(tr).append(th); } $(thead).append(tr); $(t).prepend(thead); } // end if p.colmodel //init divs g.gDiv = document.createElement('div'); //create global container g.mDiv = document.createElement('div'); //create title container g.hDiv = document.createElement('div'); //create header container g.bDiv = document.createElement('div'); //create body container g.vDiv = document.createElement('div'); //create grip g.rDiv = document.createElement('div'); //create horizontal resizer g.cDrag = document.createElement('div'); //create column drag g.block = document.createElement('div'); //creat blocker g.nDiv = document.createElement('div'); //create column show/hide popup g.nBtn = document.createElement('div'); //create column show/hide button g.iDiv = document.createElement('div'); //create editable layer g.tDiv = document.createElement('div'); //create toolbar g.sDiv = document.createElement('div'); g.pDiv = document.createElement('div'); //create pager container if (!p.usepager) { g.pDiv.style.display = 'none'; } g.hTable = document.createElement('table'); g.gDiv.className = 'flexigrid'; if (p.width != 'auto') { g.gDiv.style.width = p.width + 'px'; } //add conditional classes if ($.browser.msie) { $(g.gDiv).addClass('ie'); } if (p.novstripe) { $(g.gDiv).addClass('novstripe'); } $(t).before(g.gDiv); $(g.gDiv).append(t); //set toolbar if (p.buttons) { g.tDiv.className = 'tDiv'; var tDiv2 = document.createElement('div'); tDiv2.className = 'tDiv2'; for (var i = 0; i < p.buttons.length; i++) { var btn = p.buttons[i]; if (!btn.separator) { var btnDiv = document.createElement('div'); btnDiv.className = 'fbutton'; btnDiv.innerHTML = "