表格插件的封装

//创建组件
function Grid(args){
	//判断各种重要数据是否存在
	try{
		//如果渲染区域不存在
		if(!args.renderTo){
			throw "渲染区域不存在";
		}
		
		//判断初始化数据是否存在
		if(!args.colums){
			throw "必要数据“列名”不存在";
		}
		//判断初始化数据是否存在
		if(!args.dataSource){
			throw "渲染数据不存在";
		}
		
		//点击事件
		if(args.onClick && !(typeof args.onClick == 'function')){
			throw "点击事件必须是一个function，现在的数据类型是："+typeof args.onClick ;
		}

		
	}catch(e){
		alert("Grid组件初始化失败，原因："+e);
		
	}
	
	
	
	//调用初始化事件
	this.init(args);
}
//初始化事件
Grid.prototype.init = function(args){
	//获取渲染地址
	this.renderTo = args.renderTo;
	//获取父元素
	this.renderTo = $("#"+this.renderTo);
	this.renderTo.addClass("my-grid");

	
	//获取渲染数据
	this.dataSource = args.dataSource;
	//获取表格的列名
	this.colums = args.colums;
	//点击事件
	this.onClick = args.onClick && typeof args.onClick == "function" ? args.onClick : function(){};
	
	//带取分页参数
	if(args.postData){
		//判断是否传递参数
		if(args.postData.pageSize == null){
			args.postData.pageSize = 10;
		}
		
		if(args.postData.pageNum == null){
			args.postData.pageNum = 11;
		}
		
	}else{
		args.postData = {
			pageSize:10,	
			pageNum:1
		};
	}
	this.postData=args.postData;
	

	//将数据缓存到当前父元素身上
	this.renderTo.data("args",args);

	//创建组件
	this.byDataSource();
	
};
//根据dataSource获取数据
Grid.prototype.byDataSource = function(){
	var t = this;
	
	if(typeof t.dataSource == 'string'){
		/*$.ajax({
		   type: "POST",
		   url: t.dataSource,
		   success: function(res){
		     t.dataSource = JSON.parse(res);
		     t.bulid();
		   }
		});*/
		//使用post提交方式
		$.post(t.dataSource,t.postData,function(res){
			 t.dataSource =res;
		     t.bulid();
		},"json");
	}else{
		t.bulid();
	}	
};

//表格刷新
Grid.prototype.reload = function(pageSize,pageNum){
	
	var t =this;
	
	//从当前父元素身上将数据取出
	var args = t.renderTo.data("args");
	
	if(pageSize){
		args.postData.pageSize = pageSize;
	}
	
	if(pageNum){
		args.postData.pageNum = pageNum;
	}
	
	//重新加载表格
	
	t.init(args);
	
} ;


//创建页面元素
Grid.prototype.bulid = function(){
	
	var t = this;
	//获取父元素
	/*this.renderTo = $("#"+this.renderTo);
	this.renderTo.addClass("my-grid");*/
	
	//清空之前的数据
	this.renderTo.html("");

	

	//创建table标签
	this.grid = $('<table class="grid"></table>').appendTo(this.renderTo);
	
	//创建thead标签
	this.head = $('<thead></thead>').appendTo(this.grid);
	//创建thead标签中的tr标签
	this.theadTr = $('<tr class="gridhead"></tr>').appendTo(this.head);
	//创建thead中th标签
	$(t.colums).each(function(i,colum){
		//创建th
		var th=$('<th>'+colum.name+'</th>').appendTo(t.theadTr);
		if(colum.hide){
			th.addClass("hidden");
		}
	});
	
	//创建tbody标签
	this.tbody = $('<tbody></tbody>').appendTo(this.grid);
	//创建tbody中的tr
	$(t.dataSource.rows).each(function(i, row){
		var tbodyTr = $('<tr class="gridtr" data-id="'+row.id+'"></tr>').appendTo(t.tbody);
		//向tbody中的tr添加td数据
		$(t.colums).each(function(i,col){
			//旧字段表示从数据库中传过来的数据，新字段表示格式化后的字段
			var oldText ,newText;
			oldText = newText = row[col.alins];
			
			//保存格式化之前的数据
			if(col.originalFomatter && typeof col.originalFomatter == "function" ){
				oldText = col.originalFomatter(oldText);
			}
			
			//格式化数据
			if(col.formatter && typeof col.formatter == "function"){
			
				newText = col.formatter(row[col.alins]);
			}
			var td=$('<td alias="'+col.alins+'" originalFomatter="'+oldText+'">'+newText+'</td>').appendTo(tbodyTr);
			if(col.hide){
				td.addClass("hidden");
			}
			if(col.align){
				td.addClass("align"+col.align);
			}
			/*if(col.money==1){
				$('<i class="fa fa-circle fa-orange" aria-hidden="true"></i>').appendTo(this.td);
			}*/
		});
	});
	
	//封装分页组件
	var arrPage = [];
	arrPage.push('<div><table  class="page"><tr>');
	arrPage.push('<td style="width: 1em">共</td>');
	arrPage.push('<td style="width: 1em;color:#ef5b00;">'+t.dataSource.total+'</td>');
	arrPage.push('<td style="width: 8.5em">条         每页展示</td>');
	arrPage.push('<td style="width: 5em"><div id="pageSize" class="pageSize"></div></td>');
	arrPage.push('<td >条</td>');
	arrPage.push('<td class="page-prev"><input type="button" id="prevPage" value="上一页" /></td>');
	arrPage.push('<td class="page-cur"><span class="currPage">'+t.postData.pageNum+'</span>/<span class="total">'+Math.ceil(parseInt(t.dataSource.total)/t.postData.pageSize)+'</span></td>');
	arrPage.push('<td class="page-next"><input type="button" id="nextPage" value="下一页" /></td>');
	arrPage.push('<td class="page-input"><input type="text" id="jumptext"/></td>');
	arrPage.push('<td class="page-go"><input type="button" value="跳转" id="jump"/></td>');
	arrPage.push('</tr></table></div>');
	
	//将分页组件添加到表格组件中
	var pageText = $(arrPage.join(""));
	pageText.appendTo(t.renderTo);
	
	//选择样式
	this.selectitem=$('<div id="select-item"></div>');
	this.selectitem.appendTo(t.renderTo);
		
	//悬浮样式
	this.hoveritem=$('<div id="hover-item" class="hidden"></div>');
	this.hoveritem.appendTo(t.renderTo);
	
	//调用事件
	t.bindEvent();
	
};

//事件绑定
Grid.prototype.bindEvent = function(){
	var t = this;
	$("#edit-btn").addClass("btn-disable");
	$("#remove-btn").addClass("btn-disable");
	$(".gridtr",t.renderTo).click(function(){
		//判断当前选中行是否具有grid-select
		if($(this).hasClass("grid-select")){
			$(this).removeClass("grid-select");
		}else{
			$(".gridtr",t.renderTo).removeClass("grid-select");
			$(this).addClass("grid-select");
		}
		
		
		
	
		//调用点击事件
		t.onClick({
			"id":$(this).attr("data-id")
		});
	});
	

	//实例化下拉列表
	new DDL({
		"renderTo":$(".pageSize",t.renderTo).attr("id") ,
		"dataSource":[{
			"id":10,
			"name":10
		},{
			"id":20,
			"name":20
		},{
			"id":50,
			"name":50
		}],
		"beginOffset":1,
		"direction":"up",
		"offset":0,
		"mapping":{ //匹配映射关系
			"key":"id",
			"value":"name"
		},
		"defaultSelect":parseInt(t.postData.pageSize),
		"onClick":function(obj){
			//alert(obj.key);
			t.reload(obj.key, 1);
		}
	});
	
	//下一页按钮点击事件
	$("#nextPage",t.renderTo).click(function(){
		//获取最大页数
		var maxPage = parseInt($(".total",t.renderTo).text());
		//当前页数+1
		var page = parseInt($(".currPage",t.renderTo).text())+1;
		if(page >= maxPage){
			page = maxPage;
		}
		$(".currPage",t.renderTo).html(page);
		//刷新表格
		//t.reload($(".selectDdlItem",t.renderTo).attr("data-index"), page);
		t.reload(t.postData.pageSize, page);
	});
	
	//上一页按钮点击事件
	$("#prevPage",t.renderTo).click(function(){
		//获取最大页数
		var maxPage = parseInt($(".total",t.renderTo).text());
		//当前页数-1
		var page = parseInt($(".currPage",t.renderTo).text())-1;
		if(page <=1){
			page = 1;
		}
		$(".currPage",t.renderTo).html(page);
		//刷新表格
		//t.reload($(".selectDdlItem",t.renderTo).attr("data-index"), page);
		t.reload(t.postData.pageSize, page);
	});

	//跳转
	$("#jump", t.renderTo).click(function(){	
		var  pagetext=parseInt($("#jumptext",t.renderTo).val());
		t.reload(t.postData.pageSize, pagetext);
	});
	
};