grid

(function(){
var plugins = ['grid'];
function parser(){
$(plugins).each(function(){
var plugin = this;
var p = $('.rzy-' + plugin);
if(p.length){
p.each(function(){
$(this)[plugin]();
});
}
});
}
$(parser);
})(jQuery);

$.fn.grid = function() {
var g = this;
var id = g.attr('id');
if(!id){
var uuid = 'rzy_' + Math.floor(Math.random()*(99999-10000+1)+10000);
g.attr('id', uuid);
}
//这里是header
var header = [];
header.push("<div class='list-header'>");
var icon = this.attr('icon');
var caption = this.attr('caption');
var toolbar = this.attr('toolbar');
var url = this.attr('url');
if(icon){
header.push("<div class='list-icon icon-");
header.push(icon);
header.push("'></div>");
}
if(caption){
header.push("<div class='list-title");
if(icon){
header.push(" title-with-icon");
}
header.push("'>");
header.push(caption);
header.push("</div>");
}
if(toolbar){

}
header.push("</div>");
//这里是body
var body = [];
body.push("<div class='list-body'><table cellspacing='0' cellpadding='0' class='list-body-table'>");
//这里是表头
body.push("<thead><tr>");
var cols = g.find('div');
g.empty();
cols.each(function(){
body.push("<td>");
body.push(this.header);
body.push("</td>");
});
body.push("</tr></thead>");
//这里是数据行
body.push("<tbody>");
body.push("</tbody>");
body.push("</table>");
//这里是pager
var pager = [];
pager.push("<div class='list-pager'><table cellpadding='0'>");
var pageList = "<tr><td><select name='rows' style='margin:0 6px;'><option value=10>10</option><option value=15>15</option><option value=20>20</option></select></td>";
pager.push(pageList);
var separator = "<td><div class='pager-separator'></div></td>";
pager.push(separator);
var first = "<td><a class='pager-first' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
pager.push(first);
var prev = "<td><a class='pager-prev' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
pager.push(prev);
pager.push(separator);
var pagenum = "<td><div>第<input type='text' name='page' value=1 class='pager-num' size=2/>共<span id='pagecount'></span>页<span id='total'></span></div></td>";
pager.push(pagenum);
pager.push(separator);
var next = "<td><a class='pager-next' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
pager.push(next);
var last = "<td><a class='pager-last' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
pager.push(last);
pager.push("</tr></table></div>");
body.push(pager.join(''));
body.push("</div>");
$('a.pager-first',g).live('click', function(){
var r = $('select[name=rows]',g).val();
var params = {page:1,rows:r};
load(params);
});
$('a.pager-prev',g).live('click', function(){
var p = parseInt($('input[name=page]').val());
if(p>1){
var r = $('select[name=rows]',g).val();
var params = {page:p-1,rows:r};
load(params);
}
});
$('a.pager-next',g).live('click', function(){
var p = parseInt($('input[name=page]',g).val());
var pagecount = g.data('pagecount');
if(p<pagecount){
var r = $('select[name=rows]',g).val();
var params = {page:p+1,rows:r};
load(params);
}
});
$('a.pager-last',g).live('click', function(){
var p = g.data('pagecount');
var r = $('select[name=rows]',g).val();
var params = {page:p,rows:r};
load(params);
});
function render(){
g.append(header.join(''));
g.append(body.join(''));
}
function load(params){
$.ajax({
url: url,
type: 'post',
data: params,
dataType:'json',
success:function(data){
var tbody = $('table.list-body-table tbody',g);
tbody.empty();
var total = data.total;
if(total>0){
var rs = [];
$(data.rows).each(function(){
rs.push('<tr>');
var row = this;
cols.each(function(){
var w = 100;
if(this['width']){
w = this['width'];
}
rs.push('<td width=');
rs.push(w);
rs.push('>');
rs.push(row[this['field']]);
rs.push('</td>');
});
rs.push('</tr>');
tbody.html(rs.join(''));
});
$('input[name=page]',g).val(params['page']);
g.data('total', total);
var r = $('select[name=rows]',g).val();
var pagecount = Math.ceil(total/r);
g.data('pagecount', pagecount);
$('#pagecount',g).text(pagecount);
$('#total',g).text(total);
}else{
var nodata = "<tr><td colspan=";
nodata += cols.size();
nodata += ">没有数据</td></tr>";
tbody.html(nodata);
}
}
});
}
render();
var params = {page:1,rows:10};
load(params);
};