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