日期:2014-05-16 浏览次数:20562 次
表格渲染器,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.