谷神前端组件增强：自定义列

伪动态列

基于谷神列表api显示/隐藏列、设置列头实现

初始化

// 初始化
$gp.customColumn = {}

initColumnPool

/**
 * initColumnPool
 * 初始化列池
 * 
 * @param prefix 前缀
 * @param length 长度
 * 
 * @return Array 列ID数组
 * 
 */
function initColumnPool (prefix, length) {
	return Array.from({length}, (value, index) => prefix + index)
}
selfPage.initColumnPool = initColumnPool

getColDef

/**
 * getColDef
 * 获取列定义
 * 
 * @param detailTable 子列表
 * @param columnPool 列池
 * @param all 是否全部拉取
 * 
 * @return Array 列定义
 * 
 */
function getColDef (detailTable, columnPool, all) {
	return detailTable.getAllColumns().filter(
		colunm => columnPool.includes(colunm.colDef.field)
	).map(column => {
		let {colDef: {field, headerName}, visible} = column
		return {
			FIELD: field,
			HEADER_NAME: visible ? headerName : undefined,
		}
	}).filter(({HEADER_NAME}) => HEADER_NAME || all)
}
selfPage.getColDef = getColDef

mapColDef

/**
 * mapColDef
 * 映射列定义
 * 
 * @param colDef 列定义
 * 
 * @return Array 列定义
 * 
 */
function mapColDef (colDef) {
	return colDef.map(({FIELD, HEADER_NAME}) => ({FIELD, HEADER_NAME}))
}
selfPage.mapColDef = mapColDef

filterColDef

/**
 * filterColDef
 * 过滤列定义
 * 
 * @param colDef 列定义
 * 
 * @return Array 列定义
 * 
 */
function filterColDef (columnPool) {
	return colDef.filter(({FIELD}) => columnPool.includes(FIELD))
}
selfPage.filterColDef = filterColDef

getFields

/**
 * getFields
 * 获取列
 * 
 * @param colDef 列定义
 * 
 * @return Array 列
 * 
 */
function getFields (colDef) {
	return colDef.map(({FIELD}) => FIELD)
}
selfPage.getFields = getFields

getHeaderNamesStr

/**
 * getHeaderNamesStr
 * 获取列名汇总展示
 * 
 * @param colDefs 列定义
 * 
 * @return string 列名汇总
 * 
 */
function getHeaderNamesStr(colDefs) {
	return colDefs.reduce((headerNamesStr, colDef, index) => {
		if (index == 0 ) {
			return headerNamesStr + colDef.HEADER_NAME;
		}
		return headerNamesStr +  '、' + colDef.HEADER_NAME;
	}, '');
}
selfPage.getHeaderNamesStr = getHeaderNamesStr

newColumn

/**
 * newColumn
 * 新增列
 * 
 * @param colDef 列定义
	 * @param columnPool 列池
 * 
 * @return String 新列ID
 * 
 */
function newColumn (colDef, columnPool) {
	let fields = colDef.map(item => item.FIELD)
	let pool = columnPool.filter(column => !fields.includes(column))
	if (pool.length > 0) {
		return pool[0]
	} else {
		return null
	}
}
selfPage.newColumn = newColumn

renderColumn

/**
 * renderColumn
 * 渲染列
 * 
 * @param detailTable 子列表
 * @param columnPool 列池
 * @param colDef 列定义
 * 
 * @return void
 * 
 */
function renderColumn (detailTable, columnPool, colDef) {
	if (!colDef) {
		return
	}
	if (typeof colDef == 'string') {
		colDef = JSON.parse(colDef)
	}
	if (Array.isArray(colDef)) {
		// 处理未定义的列
		let fields = colDef.map(item => item.FIELD)
		columnPool.forEach(column => {
			if (!fields.includes(column)) {
				detailTable.setColumnVisible(column, false)
				detailTable.getData().forEach((value, index) => {
					detailTable.setDataValue(index, column, null)
				})
			}
		})
		// 处理已定义的列
		colDef.forEach(({
			FIELD,
			HEADER_NAME,
			IS_NEW
		}) => {
			detailTable.setHeaderTitle(FIELD, HEADER_NAME)
			detailTable.setColumnVisible(FIELD, !!HEADER_NAME)
			if (!HEADER_NAME || IS_NEW) {
				detailTable.getData().forEach((value, index) => {
					detailTable.setDataValue(index, FIELD, null)
				})
			}
			detailTable.autoSizeColumn(FIELD)
		})
	} else {
		console.error('自定义列数据类型不正确！')
	}
}
selfPage.renderColumn = renderColumn