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

本文主要是介绍谷神前端组件增强：自定义列，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

初始化

$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} = columnreturn {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

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(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