grid

自己写的grid。

$.fn.extend({
	grid:function(url,param, columnList){
		$(this).empty();
		var table=$("<table>").addClass("table table-striped pull-left").css({"table-layout":"fixed"}), thead = $("<thead>"), tbody=$("<tbody>"),tr=$("<tr>")
		table.data("url",url).data('param',param).data("columnList",columnList);
		for(var i=0;i<columnList.length;i++){
			var column=columnList[i];
			tr.append($("<td>").html(column['title']).css(column['css']?column['css']:{}));
		}
		thead.append(tr);
		table.append(thead).append(tbody);
		var pagination = $("<div>").addClass("row").append($("<div>").addClass("pull-left col-sm-6")).append($("<div>").css({"text-align":"right"}).addClass("pull-right col-sm-6").append($("<ul>").addClass("pagination").css("margin-top","-10px")));
		$(this).append(table).append(pagination);
		renderTable($(this).prop("id"),1);
	}
});

function renderTable(id,pageNo){
	var count=0,data,table=$("#"+id).children("table");
	table.data("pageNo",pageNo).data("data",{}).data("count",0);
	table.children("tbody").empty();
	table.next("div").children("div:eq(0)").html("");
	table.next("div").find("ul").empty();
	$.ajax({
		type:'get',
		dataType:'json',
		url:table.data("url"),
		data:table.data("param")?$.extend(table.data("param"),{pageNo:pageNo}):{pageNo:pageNo},
		success:function(result){
			count=result['count']?result['count']:0;
			data=result['data']?result['data']:{};
			table.data('data',data).data("count",count);
			
			var totalPage=Math.floor((count-1)/((table.data("param") && table.data("param")["pageSize"])?table.data("param")["pageSize"]:10)) + 1;
			table.data("totalPage",totalPage);
			var tbody=table.children("tbody");
			var pagination=table.next("div");
			var ul=pagination.find("ul");
			if(totalPage <=0){
				pagination.children("div:eq(0)").text("没有数据");
			}else{
				pagination.children("div:eq(0)").text("共"+count+"条，"+totalPage+"页");
				ul.append($("<li>").append($("<a>").html("«").prop("title","第一页").prop("href","javascript:renderTable('"+id+"',1)")));
				var begin=pageNo-3;
				var end=pageNo+3;
				if(begin<1){
					begin=1;
				}
				if(end>totalPage){
					end=totalPage;
				}
				if(begin>1){
					ul.append($("<li>").addClass("disabled").append($("<a>").html("...")));
				}
				for(var i=begin;i<pageNo;i++){
					ul.append($("<li>").append($("<a>").html(i).prop("href","javascript:renderTable('"+id+"',"+i+")")));
				}
				for(var i=pageNo;i<=end;i++){
					ul.append($("<li>").append($("<a>").html(i).prop("href","javascript:renderTable('"+id+"',"+i+")")));
				}
				if(end<totalPage){
					ul.append($("<li>").addClass("disabled").append($("<a>").html("...")));
				}
				ul.append($("<li>").append($("<a>").html("»").prop("title","最后一页").prop("href","javascript:renderTable('"+id+"',"+totalPage+")")));
			}
			ul.find("li a").each(function(){
				if($(this).text()==pageNo){
					$(this).parent("li").addClass("active");
				}
			});
			var columnList = table.data("columnList");
			for(var i=0;i<data.length;i++){
				tr=$("<tr>");
				for(var j=0;j<columnList.length;j++){
					var column=columnList[j];
					tr.append($("<td>").html(column['template']?column['template'](data[i]):data[i][column['field']]).css(column['css']?column['css']:{}));
				}
				tbody.append(tr);
			}
			
			table.find("td").each(function(){
				$(this).prop("title", $(this).html()).css({"overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap"});
			});
		}
	});
}

用法：第一个参数是请求url，第二个是请求参数，json格式，第三个是标题列表，有title,field,template,css。template优先级比field高，css是对这列添加样式。
分页参数是pageSize和pageNo。

$("#table").grid("url",{},[{title:'id',field:'boxNum'},{title:'取消时间',template:function(d){return new Date(d['cancelTime']).toLocaleDateString()},css:{width:'800px',color:'green','font-weight':'bolder'}}]);