var scrollView = function () {
|
var scrollview = $.extend(true,{}, $.fn.datagrid.defaults.view, {
|
render: function (target, container, frozen) {
|
var state = $.data(target, 'datagrid');
|
var opts = state.options;
|
var rows = this.rows || [];
|
if (!rows.length) {
|
return;
|
}
|
var fields = $(target).datagrid('getColumnFields', frozen);
|
|
if (frozen) {
|
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
|
return;
|
}
|
}
|
|
var index = this.index;
|
var table = ['<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>'];
|
for (var i = 0; i < rows.length; i++) {
|
var css = opts.rowStyler ? opts.rowStyler.call(target, index, rows[i]) : '';
|
var classValue = '';
|
var styleValue = '';
|
if (typeof css == 'string') {
|
styleValue = css;
|
} else if (css) {
|
classValue = css['class'] || '';
|
styleValue = css['style'] || '';
|
}
|
var cls = 'class="datagrid-row ' + (index % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"';
|
var style = styleValue ? 'style="' + styleValue + '"' : '';
|
// get the class and style attributes for this row
|
// var cls = (index % 2 && opts.striped) ? 'class="datagrid-row datagrid-row-alt"' : 'class="datagrid-row"';
|
// var styleValue = opts.rowStyler ? opts.rowStyler.call(target, index, rows[i]) : '';
|
// var style = styleValue ? 'style="' + styleValue + '"' : '';
|
var rowId = state.rowIdPrefix + '-' + (frozen ? 1 : 2) + '-' + index;
|
table.push('<tr id="' + rowId + '" datagrid-row-index="' + index + '" ' + cls + ' ' + style + '>');
|
table.push(this.renderRow.call(this, target, fields, frozen, index, rows[i]));
|
table.push('</tr>');
|
index++;
|
}
|
table.push('</tbody></table>');
|
|
$(container).html(table.join(''));
|
},
|
|
onBeforeRender: function (target) {
|
var state = $.data(target, 'datagrid');
|
var opts = state.options;
|
var dc = state.dc;
|
var view = this;
|
|
// erase the onLoadSuccess event, make sure it can't be triggered
|
state.onLoadSuccess = opts.onLoadSuccess;
|
opts.onLoadSuccess = function () { };
|
|
opts.finder.getRow = function (t, p) {
|
var index = (typeof p == 'object') ? p.attr('datagrid-row-index') : p;
|
var row = $.data(t, 'datagrid').data.rows[index];
|
if (!row) {
|
var v = $(t).datagrid('options').view;
|
row = v.rows[index - v.index];
|
}
|
return row;
|
};
|
|
dc.body1.add(dc.body2).empty();
|
this.rows = undefined; // the rows to be rendered
|
this.r1 = this.r2 = []; // the first part and last part of rows
|
dc.body2.unbind('.datagrid').bind('scroll.datagrid', function (e) {
|
if (state.onLoadSuccess) {
|
opts.onLoadSuccess = state.onLoadSuccess; // restore the onLoadSuccess event
|
state.onLoadSuccess = undefined;
|
}
|
if (view.scrollTimer) {
|
clearTimeout(view.scrollTimer);
|
}
|
view.scrollTimer = setTimeout(function () {
|
scrolling.call(view);
|
}, 50);
|
//scrolling.call(view);
|
});
|
|
function scrolling() {
|
if (dc.body2.is(':empty')) {
|
if (state.data.total ==0) return;
|
reload.call(this);
|
} else {
|
var firstTr = opts.finder.getTr(target, this.index, 'body', 2);
|
var lastTr = opts.finder.getTr(target, 0, 'last', 2);
|
var headerHeight = dc.view2.children('div.datagrid-header').outerHeight();
|
var top = firstTr.position().top - headerHeight;
|
var bottom = lastTr.position().top + lastTr.outerHeight() - headerHeight;
|
|
if (top > dc.body2.height() || bottom < 0) {
|
reload.call(this);
|
} else if (top > 0) {
|
var page = Math.floor(this.index / opts.pageSize);
|
this.getRows.call(this, target, page, function (rows) {
|
this.r2 = this.r1;
|
this.r1 = rows;
|
this.index = (page - 1) * opts.pageSize;
|
this.rows = this.r1.concat(this.r2);
|
this.populate.call(this, target);
|
});
|
} else if (bottom < dc.body2.height()) {
|
var page = Math.floor(this.index / opts.pageSize) + 2;
|
if (this.r2.length) {
|
page++;
|
}
|
this.getRows.call(this, target, page, function (rows) {
|
if (!this.r2.length) {
|
this.r2 = rows;
|
} else {
|
this.r1 = this.r2;
|
this.r2 = rows;
|
this.index += opts.pageSize;
|
}
|
this.rows = this.r1.concat(this.r2);
|
this.populate.call(this, target);
|
});
|
}
|
}
|
|
function reload() {
|
var top = $(dc.body2).scrollTop();
|
var index = Math.floor(top / 25);
|
var page = Math.floor(index / opts.pageSize) + 1;
|
|
this.getRows.call(this, target, page, function (rows) {
|
this.index = (page - 1) * opts.pageSize;
|
this.rows = rows;
|
this.r1 = rows;
|
this.r2 = [];
|
this.populate.call(this, target);
|
dc.body2.triggerHandler('scroll.datagrid');
|
});
|
}
|
}
|
},
|
|
getRows: function (target, page, callback) {
|
var state = $.data(target, 'datagrid');
|
var opts = state.options;
|
var index = (page - 1) * opts.pageSize;
|
var rows = state.data.rows.slice(index, index + opts.pageSize);
|
if (rows.length) {
|
callback.call(this, rows);
|
|
} else {
|
var param = $.extend({}, opts.queryParams, {
|
page: page,
|
rows: opts.pageSize
|
});
|
if (opts.sortName) {
|
$.extend(param, {
|
sort: opts.sortName,
|
order: opts.sortOrder
|
});
|
}
|
if (opts.onBeforeLoad.call(target, param) == false) return;
|
|
$(target).datagrid('loading');
|
var result = opts.loader.call(target, param, function (data) {
|
$(target).datagrid('loaded');
|
var data = opts.loadFilter.call(target, data);
|
callback.call(opts.view, data.rows);
|
// opts.onLoadSuccess.call(target, data);
|
}, function () {
|
$(target).datagrid('loaded');
|
opts.onLoadError.apply(target, arguments);
|
});
|
if (result == false) {
|
$(target).datagrid('loaded');
|
}
|
}
|
},
|
|
populate: function (target) {
|
var state = $.data(target, 'datagrid');
|
var opts = state.options;
|
var dc = state.dc;
|
var rowHeight = 25;
|
|
if (this.rows.length) {
|
opts.view.render.call(opts.view, target, dc.body2, false);
|
opts.view.render.call(opts.view, target, dc.body1, true);
|
dc.body1.add(dc.body2).children('table.datagrid-btable').css({
|
paddingTop: this.index * rowHeight,
|
paddingBottom: state.data.total * rowHeight - this.rows.length * rowHeight - this.index * rowHeight
|
});
|
opts.onLoadSuccess.call(target, {
|
total: state.data.total,
|
rows: this.rows
|
});
|
}
|
}
|
});
|
|
return scrollview;
|
};
|
