Grid组件
$.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); }); 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("="); var v = this.split("="); ret = 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; if (render) { html = eval(render).call(this, record, record); } 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 = "&nbsp;&nbsp;&nbsp;&nbsp;"; 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>&nbsp;&nbsp;&nbsp;&nbsp;</span>"); var first = $("<a>").attr("href", "javascript:void(0)").html('首&nbsp;&nbsp;&nbsp页').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('尾&nbsp;&nbsp;&nbsp页').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)(); } }); } $(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'>&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='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'>&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>"); 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]).appendTo(r); }); tbody.append(r); }); } }); } render(); load();};
页:
[1]