日期:2014-05-16  浏览次数:20482 次

js封装表格渲染器(带分页功能)
表格渲染器,gridRender.js
	/**
	 * 表格渲染器 
	 * 
	 * @param targetTableId  等待渲染的目标表格ID
	 * @param data     		 数据(数组类型,且要求数组里面的每个数据均为同一类型的对象)
	 * @param totalCount     表格总条数
	 */
function GridRender(targetTableId){

	// 分页标示符(系统会自动搜索class=这个分页标示符的div,如果找到就把它渲染为分页栏)
	var pagingClassFlag = 'pagination';
	
	// 渲染目标表格的Id
	this.targetTableId = targetTableId;
	
	// 需要渲染到表格的数据对象
	this.data = null;
	
	// 渲染表格的列名数组(数组元素为字符串,且每个数组元素字符串必须与data的属性相对应)
	this.columnModelArr = null;
	
	// 定义本对象句柄
	var gridSelf = this;
	
	// 是否有分页标记
	this.hasPaging = isHasPaging(targetTableId);
	
	// 内置分页器
	this.pager = (this.hasPaging==true) ? new Pager($('#' + this.targetTableId + ' div.' + pagingClassFlag),this.targetTableId) : null;
	if(this.pager!=null){
		this.pager.showLoadingIcon();
	}

	// 设置字段的默认值
	this.defaultCellValueMap = {};
	
	// 设置字段的默认单位
	this.cellUnitMap = {};
	
	// 开始渲染表格的行号(基于0开始的)
	this.startRenderRowNum = 1;
	
	// 渲染页面后触发回调函数
	this.renderCallBackFun = null;
	
	// 自定义渲染表格的方法
	this.customerRenderGridFunc = null;
	
	
	/**
	 * 设置当前页码
	 */
	this.setCurPageNum = function(curPageNum){
		gridSelf.pager.setCurPageNum(curPageNum);
	}
	
	/**
	 * 设置自定义渲染表格的方法
	 */
	this.setCustomerRenderGridFunc = function(func){
		gridSelf.customerRenderGridFunc = func;
	}
	
	/**
	 * 设置渲染目标表格
	 */
	this.setTargetTable = function(targetTableId){
		gridSelf.targetTableId = targetTableId;
	}
	
	/**
	 * 设置字段默认值
	 */
	this.setCellDefaultValue = function(columnName,defaultValue){
		gridSelf.defaultCellValueMap[columnName] = defaultValue;
	}
	
	/**
	 * 设置字段单位
	 */
	this.setCellUnit = function(columnName,unit){
		gridSelf.cellUnitMap[columnName] = unit;
	}
	
	/**
	 * 设置数据源
	 */
	this.setData = function(data){
		gridSelf.data = data;
	}
	
	
	/**
	 * 设置表格渲染的起始行号(基于0开始的)
	 */
	this.setStartRenderRowNum = function(value){
		gridSelf.startRenderRowNum = value;
	}
	
	/**
	 * 设置列模型    参数为一个数组,数组里面可以是字符串(数据对象的属性名),也可以是一个用户自定义的回调函数,
	 * 				回调函数如下形式:
	 * 				表格渲染器会把当前行对象以及表格数据对象作为参数,传递给这个方法
	 *      		所有该方法通常为这种形式, function xxx(row,data)
	 *       		   					    {
	 *      								  ......
	 *      								}
	 */
	this.setColumn = function(columnArr){
		gridSelf.columnModelArr = columnArr;
	}
	
	/**
	 * 复位
	 */
	this.reset = function(){
		cleanTable(gridSelf.targetTableId);
		gridSelf.pager.reset();
	}
	
	/**
	 * 停止分页器Loadding转动
	 */
	this.hideLoadingIcon = function(){
		if(gridSelf.hasPaging){
			gridSelf.pager.hideLoadingIcon();
		}
	}
	
	/**
	 * 设置每页显示的条数
	 */
	this.setPageSize = function(pageSize){
		gridSelf.pager.setPageSize(pageSize);
	}
	
	/**
	 * 设置点击分页按钮的回调函数
	 */
	this.setPageCallbackFun = function(callBackFun){
		gridSelf.pager.setPageCallbackFun(callBackFun);
	}
	
	/**
	 * 设置表格渲染后的的回调函数
	 */
	this.setRenderCallbackFun = function(callBackFun){
		gridSelf.renderCallBackFun = callBackFun;
	}
	
	/**
	 * 渲染表格数据(也可能会渲染分页器)
	 */
	this.render = function(data,totalCount,pageSize){
		
		// 待渲染的数据
		var tempData = data;
		
		// 表单总大小
		var tempTotalCount = totalCount;
		var tempPageSize = pageSize;
		if(!totalCount){
			if(data!=null && undefined != data.data)
				tempData = data.data;
			if(data!=null && undefined != data.totalCount)
				tempTotalCount = data.totalCount;
			if(data!=null && undefined != data.pageSize)
				tempPageSize = data.pageSize;
		}
		
		// 检查参数完整性
		if(!checkParam(gridSelf.targetTableId,gridSelf.columnModelArr,tempData,tempTotalCount))
			return null;

		gridSelf.data = tempData;
		
		// 去掉 loading图标
		if(gridSelf.hasPaging){
			gridSelf.pager.hideLoadingIcon();
		}
		
		// 先删除原来的数据
		cleanTable(gridSelf.targetTableId);
		 
		// 插入数据到表格
		// -- 如果用户自定义了渲染表格的方法,则调用
		if(gridSelf.customerRenderGridFunc!=null){
			gridSelf.customerRenderGridFunc(gridSelf);
		}
		// -- 否则使用默认的渲染方法
		else{
			insertData(gridSelf);
		}
		
		// 如果有分页,渲染分页栏
		if(gridSelf.hasPaging){
			
			gridSelf.pager.setTotalCount(tempTotalCount);
			
			// 如果需要改变每页大小
			if(undefined != data.