grid

(function($){        
	$.fn.Grid = function(method) {
		if (typeof method == 'string') {
			return arguments.callee.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return arguments.callee.methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist');
        }
    };
	$.fn.Grid.methods = {
		init: function(options) {
			var defaults = {
				title:'Grid',
				columns:[],
				pager:true
			};
			var settings = $.extend({}, defaults, options);
			return this.each(function(){
				$(this).data('options', settings);
				var el = $(this).addClass('grid');
				function ds(url, page, pagesize){
					var param = {page: page, pagesize: pagesize};
					var ds = {total:0, data:[]};
					$.ajax({
						url:url,
						type: 'post',
						cache: false,
						async: false,
						data: param,
						dataType: 'json',
				        success: function(result){
				        	ds = result;
						}
					});
					return ds;
				}
				function header(){
					var code = new Array();
					code.push("<div class='header'><strong>" + settings.title + "</strong><span class=icon-grid></span></div>");
					var toolbar = el.attr('toolbar');
					if(toolbar){
						code.push("<div class='toolbar'></div>");
					}
					code.push("<table class='dataview'>");
					code.push("<thead><tr>");
					if(settings.selector&&(settings.selector == 'm')){
						code.push("<th align=center width=30><input type=checkbox name='checkall' hideFocus></th>");
					}
					else if(settings.selector&&(settings.selector == 's')){
						code.push("<th align=center width=30></th>");
					}
					$(settings.columns).each(function(){
						var h = this.header;
						var w = this.width;
						code.push("<th");
						if(w){
							code.push(" width=" + w);
						}
						code.push(">" + h + "</th>");
						
					});
					code.push("</tr></thead>");
					return code.join('');
				}
				function body(records){
					var code = new Array();
					var span = $('<span>');
					$(records).each(function(){
						var r = this;
						code.push("<tr>");
						if(settings.selector&&(settings.selector == 'm')){
							code.push("<td align=center width=30><input type=checkbox hideFocus></td>");
						}
						else if(settings.selector&&(settings.selector == 's')){
							code.push("<td align=center width=30><input type=radio hideFocus name=ids></td>");
						}
						$(settings.columns).each(function(){
							var f = this.field;
							var align = this.align;
							var v = r[f];
							code.push("<td title='" + v + "'");
							if(align){
								code.push(" align='" + align + "'");
							}
							code.push(">" + span.text(v).html() + "</td>");
						});
						code.push("</tr>");
					});
					span.remove();
					return code.join('');
				}
				function pager(total, page, pagesize){
					var code = new Array();
					var pagecount = Math.ceil(total/pagesize);
					code.push("总共<span class=total>");
					code.push(total);
					code.push("</span>记录&nbsp;&nbsp;");
					code.push("当前<span class=current>");
					code.push(page);
					code.push("</span>");
					code.push("/<span class=pagecount>");
					code.push(pagecount);
					code.push("</span>页&nbsp;&nbsp;");
					code.push("<span class=changepage>");
					code.push("<span class=first");
					if(page == 1){
						code.push(" disabled=disabled");
					}
					code.push(">首页</span>&nbsp;&nbsp;");
					code.push("<span class=pre");
					if(page == 1){
						code.push(" disabled=disabled");
					}
					code.push(">上一页</span>&nbsp;&nbsp;");
					code.push("<span class=next");
					if(page == pagecount){
						code.push(" disabled=disabled");
					}
					code.push(">下一页</span>&nbsp;&nbsp;");
					code.push("<span class=last");
					if(page == pagecount){
						code.push(" disabled=disabled");
					}
					code.push(">尾页</span>&nbsp;&nbsp;");
					code.push("</span>");
					return code.join('');
				}
				el.data('page', 1);
				el.data('pagesize', 10);
				var data = new Array();
				if(settings.url){
					el.data('url', settings.url);
					data = ds(settings.url, 1, 10);
				}else{
					data = settings.data;
				}
				el.data('ds', data);
				el.data('total', data.total);
				var html = new Array();
				html.push(header());
				html.push("<tbody>");
				html.push(body(data.data));
				html.push("</tbody>");
				html.push("</table>");
				if(settings.pager){
					var total = parseInt(el.data('total'));
					html.push("<div class='pagebar'>");
					html.push(pager(total, 1, 10));
					html.push("</div>");
				}
				el.append(html.join(''));
				
				$('table.dataview tr').live('mouseenter', function(){
					$(this).addClass('strips');
				}).live('mouseleave', function(){
					$(this).removeClass('strips');
				});
				$(':checkbox[name=checkall]', el).click(function(){
					$('table.dataview tr :checkbox', el).attr("checked",this.checked);
				});
				
				$('.changepage', el).live('click',function(e){
					$(':checkbox[name=checkall]', el).attr("checked",false);
					var p = 1;
					var page = parseInt(el.data('page'));
					var pagesize = parseInt(el.data('pagesize'));
					var total = parseInt(el.data('total'));
					var url = el.data('url');
					var t = e.target;
					if($(t).is('.first')){
						p = 1;
					}
					if($(t).is('.pre')){
						p = page - 1;
					}
					if($(t).is('.next')){
						p = page + 1;
					}
					if($(t).is('.last')){
						p = Math.ceil(total/pagesize);
					}
					el.data('page', p);
					var dd = ds(url, p, pagesize);
					el.data('ds', dd);
					var pp = parseInt(el.data('page'));
					var ps = parseInt(el.data('pagesize'));
					$('table.dataview tbody',el).empty();
					$('table.dataview tbody',el).append(body(dd.data));
					$('.pagebar',el).empty();
					$('.pagebar',el).append(pager(dd.total, pp, ps));
				});
			});
        },
        reload: function(data){
        	return this.each(function(){
        		var url = $(this).data('options').url;
        		alert(url);
        	});
        },
        getSelected: function(){
        	var ret = [];
        	var rows = null;
        	var grid = $(this);
        	this.each(function(){
        		rows = $('table.dataview tbody :checkbox:checked', this).parent().parent();
        	});
        	rows.each(function() {   
        		var rowIndex = this.rowIndex - 1;   
        		ret.push(grid.data('ds').data[rowIndex]);   
        	});  
        	return ret;
        }
	}; 
})(jQuery);

 

body{
	margin:10px;
	padding:10px;
	font-size:13px;
}
.grid{
	border: 0px solid #d2d2d2;
}

.grid .dataview{
	width:100%;
	height:100%;
	border-collapse:collapse;
	border: 1px solid #d2d2d2;
	table-layout:fixed;
}

.grid .dataview th{
	border: 1px solid #d2d2d2;
	height:24px;
	font-size:13px;
	padding-left:3px;
	background:url(../images/datagrid_header_bg.gif);
}

.grid .dataview tr{
	background:#lightsmock;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

.grid .dataview td{
	border-right:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	height:22px;
	font-size:13px;
	padding-left:3px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	
}

.grid .header{
	border-right: 1px solid #d2d2d2;
	border-top: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	background:#fafafa url(../images/datagrid_title_bg.png);
	height:30px;
	line-height:30px;
	padding-left:5px;
}

.icon-grid{
	background: url(../images/grid.png) no-repeat center;
	width:16px;
	height:16px;
	margin-top:7px;
	float:left;
}

.grid .toolbar{
	border-right: 1px solid #d2d2d2;
	border-top: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	height:28px;
	line-height:28px;
	background:url(../images/datagrid_header_bg.gif);
	padding-left:2px;
}

.grid .pagebar{
	border-right: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	height:35px;
	line-height:35px;
	padding-left:5px;
	background:#efefef url(../images/datagrid_header_bg.png);
}

.grid .pagebar .first, .pre, .next, .last{
	cursor:pointer;
}

.strips{
	background:#D0E5F5;
}