在我们下载下来flexigrid.js之后在前台页面上调用之后，有时你会发现在显示数据的时候，数据根本显示不出来，这其实是下载下来的flexigrid.js有错误，我们需要修改里面的内容已达到我们数据显示的目的。
具体修改之后的flexigrid.js的完整内容如下，你也可以把这些代码复制全部粘贴覆盖到下载下来的flexigrid.js文件中，然后你就会惊奇的发现你的数据可以显示了，具体代码如下：
!(function ($) {
//flexigrid
function getScrollWidth() {
var noScroll, scroll, oDiv = document.createElement("DIV");
oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
noScroll = document.body.appendChild(oDiv).clientWidth;
oDiv.style.overflowY = "scroll";
scroll = oDiv.clientWidth;
document.body.removeChild(oDiv);
return noScroll - scroll+1;
}
var browser = $.browser;
var gridheight;
function uaMatch(ua) {
ua = ua.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec(ua) || /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
return {
browser: match[1] || "",
version: match[2] || "0"
};
};
if (!browser) {
var matched = uaMatch(navigator.userAgent);
browser = {};
if (matched.browser) {
browser[matched.browser] = true;
browser.version = matched.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if (browser.chrome) {
browser.webkit = true;
} else if (browser.webkit) {
browser.safari = true;
}
}
if (typeof $.support.selectstart != 'function') {
$.support.selectstart = "onselectstart" in document.createElement("div");
}
if (typeof $.fn.disableSelection != 'function') {
$.fn.disableSelection = function () {
return this.bind(($.support.selectstart ? "selectstart" : "mousedown") +
".ui-disableSelection", function (event) {
event.preventDefault();
});
};
}
$.addFlex = function (t, p) {
if (t.grid) return false; //return if already exist
p = $.extend({ //apply default properties
url: false, //URL if using data from AJAX
method: 'POST', //data sending method
dataType: 'json', //type of data for AJAX, either xml or json
errormsg: 'Connection Error',
usepager: true,
page: 1, //current page
total: 1, //total pages
useRp: true, //use the results per page select box
rp: 30, //results per page
rpOptions: [15, 20, 30, 50, 100], //allowed per-page values
idProperty: 'id',
pagestat: '{from} - {to} of {total}',
pagetext: '',
outof: '/',
findtext: 'Find',
params: [], //allow optional parameters to be passed around
procmsg: '...',
query: '',
qtype: '',
nomsg: '', //No items
autoload: true,
blockOpacity: 0.1,
addTitleToCell: true, // add a title attr to cells with truncated contents
onChangeSort: true,
onSuccess: false,
onError: false,
onSubmit: false, //using a custom populate function
__mw: { //extendable middleware function holding object
datacol: function (p, col, val) { //middleware for formatting data columns
var _col = (typeof p.datacol[col] == 'function') ? p.datacol[col](val) : val; //format column using function
if (typeof p.datacol['*'] == 'function') { //if wildcard function exists
return p.datacol['*'](_col); //run wildcard function
} else {
return _col; //return column without wildcard
}
}
},
getGridClass: function (g) { //get the grid class, always returns g
return g;
},
datacol: {} //datacol middleware object 'colkey': function(colval) {}
}, p);
$(t).show()
.attr({
cellPadding: 0,
cellSpacing: 0
})
.removeAttr('width');
var g = {
hset: {},
fixHeight: function (newH) {
newH = false;
if (!newH) newH = $(g.bDiv).height();
var hdHeight = $(this.hDiv).height();
$(g.block).css({
marginBottom: (0-gridheight)
});
},
scroll: function () {
this.hDiv.scrollLeft = this.bDiv.scrollLeft;
},
addData: function (data) { //parse data
if (p.dataType == 'json') {
data = $.extend({
rows: [],
page: 0,
total: 0
}, data);
}
$('.pReload', this.pDiv).removeClass('loading');
this.loading = false;
if (!data) {
$('.pPageStat', this.pDiv).html(p.errormsg);
if (p.onSuccess) p.onSuccess(this);
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);
if (p.onSuccess) p.onSuccess(this);
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');
var jtr = $(tr);
if (row.name) tr.name = row.name;
if (row.color) {
jtr.css('background', row.color);
}
if (row[p.idProperty]) {
tr.id = 'row' + row[p.idProperty];
jtr.attr('data-id', row[p.idProperty]);
}
$('thead tr:first th', g.hDiv).each( //add cell
function () {
var td = document.createElement('td');
var idx = $(this).attr('axis').substr(3);
var iHTML = '';
if (typeof row.cell[idx] != "undefined") {
iHTML = (row.cell[idx] !== null) ? row.cell[idx] : ''; //null-check for Opera-browser
} else {
iHTML = row.cell[p.colModel[idx].name];
}
td.innerHTML = p.__mw.datacol(p, $(this).attr('abbr'), iHTML); //use middleware datacol to format cols
$(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 < row.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 ($(this).attr('name')) tr.name = $(this).attr('name');
if ($(this).attr('color')) {
$(tr).css('background', $(this).attr('id'));
}
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);
var text = $("cell:eq(" + idx + ")", robj).text();
var offs = text.indexOf('<BGCOLOR=');
if (offs > 0) {
$(td).css('background', text.substr(offs + 7, 7));
}
td.innerHTML = p.__mw.datacol(p, $(this).attr('abbr'), text); //use middleware datacol to format cols
$(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();
tbody = null;
data = null;
i = null;
if (p.onSuccess) {
p.onSuccess(this);
}
$(g.block).hide();
this.hDiv.scrollLeft = this.bDiv.scrollLeft;
if (browser.opera) {
$(t).css('visibility', 'visible');
}
},
changeSort: function (th) { //change sortorder
if (this.loading) {
return true;
}
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.total == 0 ? 0 : (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');
$(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.length) {
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,
async: true,
success: function (data) {
g.addData(data);
}
});
},
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, 10) - 1;
}
break;
case 'next':
if (p.page < p.pages) {
p.newp = parseInt(p.page, 10) + 1;
}
break;
case 'last':
p.newp = p.pages;
break;
case 'input':
var nv = parseInt($('.pcontrol input', this.pDiv).val(), 10);
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({
width: $('div:first', pth)[0].style.width
});
if (pth.hidden) {
$(this).css('display', 'none');
}
}
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
g.addTitleToCell(tdDiv);
});
},
getCellDim: function (obj) { // get cell prop for editable event
var ht = parseInt($(obj).height(), 10);
var pht = parseInt($(obj).parent().height(), 10);
var wt = parseInt(obj.style.width, 10);
var pwt = parseInt($(obj).parent().width(), 10);
var top = obj.offsetParent.offsetTop;
var left = obj.offsetParent.offsetLeft;
var pdl = parseInt($(obj).css('paddingLeft'), 10);
var pdt = parseInt($(obj).css('paddingTop'), 10);
return {
ht: ht,
wt: wt,
top: top,
left: left,
pdl: pdl,
pdt: pdt,
pht: pht,
pwt: pwt
};
},
combo_flag: true,
combo_resetIndex: function (selObj) {
if (this.combo_flag) {
selObj.selectedIndex = 0;
}
this.combo_flag = true;
},
combo_doSelectAction: function (selObj) {
eval(selObj.options[selObj.selectedIndex].value);
selObj.selectedIndex = 0;
this.combo_flag = false;
},
//Add title attribute to div if cell contents is truncated
addTitleToCell: function (tdDiv) {
var $div = (tdDiv instanceof jQuery) ? tdDiv : $(tdDiv);
$div.attr('title', unescape($div.text()));
},
pager: 0
};
g = p.getGridClass(g); //get the grid class
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).attr('axis', 'col' + i);
if (cm) { // only use cm if its defined
if ($.cookies) {
var cookie_width = 'flexiwidths/' + cm.name; // Re-Store the widths in the cookies
if ($.cookie(cookie_width) != undefined) {
cm.width = $.cookie(cookie_width);
}
}
if (cm.display != undefined) {
th.innerHTML = cm.display;
}
if (cm.name && cm.sortable) {
$(th).attr('abbr', cm.name);
}
if (cm.width) {
$(th).attr('width', cm.width);
}
if ($(cm).attr('hide')) {
th.hidden = true;
}
if (cm.process) {
th.process = cm.process;
}
} else {
th.innerHTML = "";
$(th).attr('width', 30);
}
$(tr).append(th);
}
$(thead).append(tr);
$(t).prepend(thead);
} // end if p.colmodel
//init divs
g.gDiv = document.createElement('div'); //create global 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.block = document.createElement('div'); //creat blocker
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';
//add conditional classes
if (browser.msie) {
$(g.gDiv).addClass('ie');
}
$(t).before(g.gDiv);
$(g.gDiv).append(t);
g.hDiv.className = 'hDiv';
$(t).before(g.hDiv);
g.hTable.cellPadding = 0;
g.hTable.cellSpacing = 0;
$(g.hDiv).append('<div class="hDivBox"></div>');
$(".hDivBox").css('padding-right', getScrollWidth());
$('div', g.hDiv).append(g.hTable);
var thead = $("thead:first", t).get(0);
if (thead) $(g.hTable).append(thead);
thead = null;
if (!p.colmodel) var ci = 0;
$('thead tr:first th', g.hDiv).each(function () {
var thdiv = document.createElement('div');
if ($(this).attr('abbr')) {
$(this).click(function (e) {
if (!$(this).hasClass('thOver')) return false;
var obj = (e.target || e.srcElement);
if (obj.href || obj.type) return true;
g.changeSort(this);
});
if ($(this).attr('abbr') == p.sortname) {
this.className = 'sorted';
thdiv.className = 's' + p.sortorder;
}
}
if (this.hidden) {
$(this).hide();
}
if (!p.colmodel) {
$(this).attr('axis', 'col' + ci++);
}
// 当没有默认宽度的时候, 表头不能够对应上
// 这不是最好的方法, 但是至少能够防止生成表格失败
if (this.width == '') {
this.width = 100;
}
$(thdiv).css({
width: this.width + 'px'
});
thdiv.innerHTML = this.innerHTML;
$(this).empty().append(thdiv).removeAttr('width').hover(function () {
if (!$(this).hasClass('thMove')) {
$(this).addClass('thOver');
}
if ($(this).attr('abbr') != p.sortname && $(this).attr('abbr')) {
$('div', this).addClass('s' + p.sortorder);
} else if ($(this).attr('abbr') == p.sortname && $(this).attr('abbr')) {
var no = (p.sortorder == 'asc') ? 'desc' : 'asc';
$('div', this).removeClass('s' + p.sortorder).addClass('s' + no);
}
var nv = $('th:visible', g.hDiv).index(this);
}, function () {
$(this).removeClass('thOver');
if ($(this).attr('abbr') != p.sortname) {
$('div', this).removeClass('s' + p.sortorder);
} else if ($(this).attr('abbr') == p.sortname) {
var no = (p.sortorder == 'asc') ? 'desc' : 'asc';
$('div', this).addClass('s' + p.sortorder).removeClass('s' + no);
}
}); //wrap content
});
//set bDiv
g.bDiv.className = 'bDiv';
$(t).before(g.bDiv);
$(g.bDiv).scroll(function (e) {
g.scroll()
}).append(t);
//add td & row properties
g.addCellProp();
//$(g.bDiv).rollbar();
// add pager
if (p.usepager) {
g.pDiv.className = 'pDiv';
g.pDiv.innerHTML = '<div class="pDiv2"></div>';
$(g.bDiv).after(g.pDiv);
var html = ' <div class="pGroup"> <div class="pFirst pButton"><span></span></div><div class="pPrev pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pcontrol">' + p.pagetext + ' <input type="text" size="4" value="1" /> ' + p.outof + ' <span> 1 </span></span></div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pNext pButton"><span></span></div><div class="pLast pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pReload pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pPageStat"></span></div>';
$('div', g.pDiv).html(html);
$('.pReload', g.pDiv).click(function () {
g.populate();
});
$('.pFirst', g.pDiv).click(function () {
g.changePage('first');
});
$('.pPrev', g.pDiv).click(function () {
g.changePage('prev');
});
$('.pNext', g.pDiv).click(function () {
g.changePage('next');
});
$('.pLast', g.pDiv).click(function () {
g.changePage('last');
});
$('.pcontrol input', g.pDiv).keydown(function (e) {
if (e.keyCode == 13) {
g.changePage('input');
}
});
if (browser.msie && browser.version < 7) $('.pButton', g.pDiv).hover(function () {
$(this).addClass('pBtnOver');
}, function () {
$(this).removeClass('pBtnOver');
});
if (p.useRp) {
var opt = '',
sel = '';
for (var nx = 0; nx < p.rpOptions.length; nx++) {
if (p.rp == p.rpOptions[nx]) sel = 'selected="selected"';
else sel = '';
opt += "<option value='" + p.rpOptions[nx] + "' " + sel + " >" + p.rpOptions[nx] + " </option>";
}
$('.pDiv2', g.pDiv).prepend("<div class='pGroup'><select name='rp'>" + opt + "</select></div> <div class='btnseparator'></div>");
$('select', g.pDiv).change(function () {
p.newp = 1;
p.rp = +this.value;
g.populate();
});
}
}
$(g.pDiv).append("<div style='clear:both'></div>");
//add block
g.block.className = 'gBlock';
if ($(g.hDiv).height()) {
gridheight = $(g.hDiv).height() + $(g.bDiv).height() + $(g.pDiv).height() + 3;
}
else {
gridheight = $("#main").height();
}
var gtop = g.bDiv.offsetTop;
$(g.block).css({
width: g.bDiv.style.width,
height: gridheight,
background: '#000000',
position: 'relative',
marginBottom: (0-gridheight),
zIndex: 1
});
$(g.block).fadeTo(0, p.blockOpacity);
// add column control
if ($('th', g.hDiv).length) {
var cn = 0;
$('th div', g.hDiv).each(function () {
var kcol = $("th[axis='col" + cn + "']", g.hDiv)[0];
var chk = 'checked="checked"';
if (kcol.style.display == 'none') {
chk = '';
}
cn++;
});
$('thead tr:first th:last', g.hDiv).each(function () {
$(this).css('border-right', '0px;');
});
}
//browser adjustments
if (browser.msie && browser.version < 7.0) {
$('.hDiv,.bDiv,.pDiv', g.gDiv).css({
width: '100%'
});
$(g.gDiv).addClass('ie6');
}
g.fixHeight();
//make grid functions accessible
t.p = p;
t.grid = g;
// load data
if (p.url && p.autoload) {
g.populate();
}
return t;
};
var docloaded = false;
$(document).ready(function () {
docloaded = true;
});
$.fn.flexigrid = function (p) {
return this.each(function () {
if (!docloaded) {
$(this).hide();
var t = this;
$(document).ready(function () {
$.addFlex(t, p);
});
} else {
$.addFlex(this, p);
}
});
}; //end flexigrid
$.fn.flexReload = function (p) { // function to reload grid
return this.each(function () {
if (this.grid && this.p.url) this.grid.populate();
});
}; //end flexReload
$.fn.flexOptions = function (p) { //function to update general options
return this.each(function () {
if (this.grid) $.extend(this.p, p);
});
}; //end flexOptions
$.fn.flexAddData = function (data) { // function to add data to grid
return this.each(function () {
if (this.grid) this.grid.addData(data);
});
};
$.fn.noSelect = function (p) { //no select plugin by me :-)
var prevent = (p === null) ? true : p;
if (prevent) {
return this.each(function () {
if (browser.msie || browser.safari) $(this).bind('selectstart', function () {
return false;
});
else if (browser.mozilla) {
$(this).css('MozUserSelect', 'none');
$('body').trigger('focus');
} else if (browser.opera) $(this).bind('mousedown', function () {
return false;
});
else $(this).attr('unselectable', 'on');
});
} else {
return this.each(function () {
if (browser.msie || browser.safari) $(this).unbind('selectstart');
else if (browser.mozilla) $(this).css('MozUserSelect', 'inherit');
else if (browser.opera) $(this).unbind('mousedown');
else $(this).removeAttr('unselectable', 'on');
});
}
}; //end noSelect
$.fn.flexSearch = function (p) { // function to search grid
return this.each(function () {
if (this.grid && this.p.searchitems) this.grid.doSearch();
});
}; //end flexSearch
$.fn.selectedRows = function (p) {
var arReturn = [];
var arRow = [];
var selector = $(this.selector + ' .trSelected');
$(selector).each(function (i, row) {
arRow = [];
var idr = $(row).data('id');
$.each(row.cells, function (c, cell) {
var col = cell.abbr;
var val = cell.firstChild.innerHTML;
if (val == ' ') val = ''; // Trim the content
var idx = cell.cellIndex;
arRow.push({
Column: col, // Column identifier
Value: val, // Column value
CellIndex: idx, // Cell index
RowIdentifier: idr // Identifier of this row element
});
});
arReturn.push(arRow);
});
return arReturn;
};
$.fn.OneDblClick = function (options) {
return this.each(function () {
var s = $.extend({}, $.fn.OneDblClick.Default, options || {});
var self_obj = this;
do_click = function (e) {
clearTimeout(s.timer);
s.timer = setTimeout(function () { s.oneclick.call(self_obj, e); }, 400);
},
do_dblclick = function (e) {
clearTimeout(s.timer);
s.dblclick.call(self_obj, e);
};
$(this).click(do_click).dblclick(do_dblclick);
});
};
$.fn.OneDblClick.Default = {
timer: null,
oneclick: $.noop,
dblclick: $.noop
};
})(jQuery);
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
