$.fn.grid = function(p) {
var grid = this;
var g = {
reload: function() {
grid.attr('page', 1);
po.loadData();
},
getSelected: function() {
var ret = [];
var rows = [];
if (g.sm == 'single') {
rows = $(":radio:checked", g.body).parents('tr');
}
if (g.sm == 'multi') {
rows = $(":checkbox:checked", g.body).parents('tr');
}
rows.each(function() {
var rowIndex = this.rowIndex - 1;
ret.push(g.data[rowIndex]);
});
return ret;
}
};
var po = {
init: function() {
g.url = grid.addClass("grid").attr({
page: 1,
pagesize: 10
}).attr("url");
g.sm = grid.attr("sm");
g.header = $("tr.gridheader", grid);
g.cm = $("td", g.header);
g.header.prepend(po.createHeaderSm());
po.loadData();
},
createHeaderSm: function() {
var td = $('<td>').width(30).attr('align', 'center');
if (g.sm == 'single') {
return td.html('选择');
}
if (g.sm == 'multi') {
var c = $("<input type='checkbox'/>");
c.bind('click',
function() {
$(":checkbox", g.body).attr('checked', $(this).attr('checked'));
});
return td.append(c);
}
},
createBodySm: function() {
var td = $('<td>').width(30).attr('align', 'center');
if (g.sm == 'single') {
var c = $("<input type='radio' name='smitem'/>");
return td.append(c);
}
if (g.sm == 'multi') {
var c = $("<input type='checkbox'/>");
return td.append(c);
}
},
getParams: function() {
if (typeof(p) == 'function') {
var temp = p();
if (typeof(temp) == 'string') {
var arr = temp.split("&");
var ret = {};
$(arr).each(function() {
var k = this.split("=")[0];
var v = this.split("=")[1];
ret[k] = v;
});
return ret;
}
if (typeof(temp) == 'object') {
return t;
}
}
if (typeof(p) == 'object') {
return p;
}
return {};
},
loadData: function() {
grid.loading();
var params = po.getParams();
var page = parseInt(grid.attr('page'));
var pagesize = parseInt(grid.attr('pagesize'));
params['page'] = page;
params['pagesize'] = pagesize;
$.ajax({
url: g.url,
type: "post",
async: true,
data: params,
dataType: "json",
context: this,
success: function(d) {
g.total = d['total'];
g.data = d['data'];
var page = parseInt(grid.attr('page'));
var pagesize = parseInt(grid.attr('pagesize'));
g.page = page;
g.pagesize = pagesize;
g.pagecount = Math.ceil(g.total / g.pagesize);
po.showData();
}
});
},
showData: function() {
$(":checkbox", g.header).attr('checked', false);
$("tr.gridbody", grid).remove();
$('tr.gridpagebar', grid).remove();
$(g.data).each(function() {
var row = $('<tr>').addClass('gridbody');
row.append(po.createBodySm());
var record = this;
g.cm.each(function() {
var html = "";
var p = $(this).attr("property");
var render = $(this).attr("render");
var align = $(this).attr("align");
var width = $(this).width();
var html = record[p];
if (render) {
html = eval(render).call(this, record, record[p]);
}
var cell = $("<td>").width(width).attr("align", align).html(html);
row.append(cell);
});
grid.append(row);
});
g.body = $("tr.gridbody", grid);
g.body.filter(":odd").css("background", "#eee");
po.buildPager();
},
buildPager: function() {
var tr = $('<tr>').addClass('gridpagebar').height(30);
var colspan = g.sm ? (g.cm.size() + 1) : g.cm.size();
var td = $("<td>").attr('colspan', colspan);
if (g.total > 0) {
if (g.pagecount > 1) {
td.append(po.displayMsg());
td.append(po.changePager());
}
tr.append(td);
} else {
tr.append(td.html('没有数据'));
}
grid.append(tr);
g.pagebar = $("tr.gridpagebar", grid);
grid.unloading();
},
displayMsg: function() {
var space = " ";
var msg = "总共{total}条记录" + space + "当前第{page}/{pagecount}页" + space + "显示第{from}~{to}条记录";
var start = (g.page - 1) * g.pagesize;
var limit = (g.page < g.pagecount) ? g.pagesize: (g.total % g.pagesize);
var from = parseInt(start) + 1;
var to = parseInt(start) + parseInt(limit);
msg = msg.replace(/{total}/g, g.total);
msg = msg.replace(/{page}/g, g.page);
msg = msg.replace(/{pagecount}/g, g.pagecount);
msg = msg.replace(/{from}/g, from).replace(/{to}/g, to);
return $('<span>').html(msg);
},
changePager: function() {
var space = $("<span> </span>");
var first = $("<a>").attr("href", "javascript:void(0)").html('首  页').click(function() {
if (g.page > 1) {
grid.attr('page', 1);
po.loadData();
}
});
var prev = $("<a>").attr("href", "javascript:void(0)").html('上一页').click(function() {
if (g.page > 1) {
grid.attr('page', g.page - 1);
po.loadData();
}
});
var next = $("<a>").attr("href", "javascript:void(0)").html('下一页').click(function() {
if (g.page < g.pagecount) {
grid.attr('page', g.page + 1);
po.loadData();
}
});
var last = $("<a>").attr("href", "javascript:void(0)").html('尾  页').click(function() {
if (g.page < g.pagecount) {
grid.attr('page', g.pagecount);
po.loadData();
}
});
if (g.page == 1) {
first.attr("disabled", "disabled");
prev.attr("disabled", "disabled");
}
if (g.page == g.pagecount) {
next.attr("disabled", "disabled");
last.attr("disabled", "disabled");
}
var pm = $('<span>');
pm.append(space.clone()).append(first);
pm.append(space.clone()).append(prev);
pm.append(space.clone()).append(next);
pm.append(space.clone()).append(last);
return pm;
}
};
po.init();
return g;
};
(function(){
var plugins = ['grid'];
function parser(){
$(plugins).each(function(){
var p = $('.rzy-' + this);
if(p.length){
$('.rzy-' + this)[this]();
}
});
}
$(parser);
})(jQuery);
$.fn.grid = function() {
var g = this;
//这里是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 = $('div',g);
g.empty();
cols.each(function(){
body.push("<td>");
body.push(this.header);
body.push("</td>");
});
body.push("</tr></thead>");
//这里是数据行
body.push("<tbody><tr>");
body.push("<td colspan=");
body.push(cols.size());
body.push("></td>");
body.push("</tr></tbody>");
body.push("</table>");
//这里是pager
var pager = [];
pager.push("<div class='list-pager'><table cellpadding='0'>");
var pageList = "<tr><td><select style='margin:0 6px;'><option>10</option><option>15</option><option>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'> </a></td>";
pager.push(first);
var prev = "<td><a class='pager-prev' href='javascript:void(0)' hidefocus='true'> </a></td>";
pager.push(prev);
pager.push(separator);
var pagenum = "<td><div>第<input type='text' name='pagenum' class='pager-num' size=2/>共10页</div></td>";
pager.push(pagenum);
pager.push(separator);
var next = "<td><a class='pager-next' href='javascript:void(0)' hidefocus='true'> </a></td>";
pager.push(next);
var last = "<td><a class='pager-last' href='javascript:void(0)' hidefocus='true'> </a></td>";
pager.push(last);
pager.push("</tr></table></div>");
body.push(pager.join(''));
body.push("</div>");
function render(){
g.append(header.join(''));
g.append(body.join(''));
}
function load(){
$.ajax({
url: url,
dataType:'json',
success:function(data){
var tbody = $('table.list-body-table tbody',g);
tbody.empty();
$(data.rows).each(function(){
var r = $('<tr>')
var row = this;
cols.each(function(){
$("<td>").html(row[this['field']]).appendTo(r);
});
tbody.append(r);
});
}
});
}
render();
load();
};
