谷神前端组件增强：二级列表

all the time once

已于 2024-06-04 20:38:50 修改

阅读量173

点赞数 3

分类专栏： # 谷神前端文章标签：开发语言

于 2024-05-01 15:11:42 首次发布

本文链接：https://blog.csdn.net/weixin_44893650/article/details/138373285

版权

谷神前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章详细阐述了如何在agGrid中使用createGuthonOptBtnsElement函数创建可定制操作的按钮，涉及到HTML字符串解析和DOM元素的动态创建。

摘要由CSDN通过智能技术生成

createGuthonOptBtnsElement

/**
 * createGuthonOptBtnsElement
 * 根据提供的row、options为子列表创建并返回谷神操作列按钮元素。
 * 二级列表操作列按钮创建在主列表，可选项从dom复制。
 * 操作列按钮可以直接获取二级列表数据，父级数据需要克隆后使用，防止循环引用。
 *   
 * @param {object} row - agGrid单元格渲染函数参数。
 * @param {array} options - 谷神操作按钮配置项数组。
 * 
 * @returns {Element} - 返回创建的DOM元素。
 * 
 */  
function createGuthonOptBtnsElement (row, options) {
	let btns = createElementFromHTML(`<ul class="item-table-subbtn gd-table-field-buttons"></ul>`)
	options.forEach (({id = '', name = '', aliasName = '', page = this, onclick = () => console.log('onclick'), render = () => true, }) => {
		let btnHtml = `
			<li ${render(row) ? '' : 'style="display: none;"'}>
				<button 
					class="btn btn-link gd_bluebtn " 
					type="button" 
					id="${id}-${row.rowIndex}" 
					title="" 
					${render(row) ? '' : 'disable'}
					alias-name="${aliasName}"
				>
					<i class=""></i>			
					<span class="gd-button-text">${name}</span>
				</button>  
			</li>
		`
		let btn = createElementFromHTML(btnHtml)
		btn.onclick = () => {
			onclick.call(page, row.data)
		}
		btns.appendChild(btn)
	})
	return btns
}
selfPage.createGuthonOptBtnsElement = createGuthonOptBtnsElement

// 带有操作列按钮的列定义
function columnDefs (params) {
	return [
		{headerName: "其它列", field:"OTHER"},
		{headerName: '操作列', pinned: 'right', cellRenderer: 
			function(row){
				// 保存父级使用
				row.parent = params
				// 保存父级到子级使用（操作列按钮取数据）
				row.data.parent = JSON.parse(JSON.stringify(params.data))
				return $gp.createGuthonOptBtnsElement(row, [{
					id: 'id',
					name: 'name',
					page: 'page',
					onclick: 'onclick',
					render: ({data: {STATE}, parent:{data:{STATE}}}) => true,
				}])
			}
		},
	]
}

createElementFromHTML

/**  
 * 根据提供的HTML字符串创建并返回一个DOM元素。  
 *  
 * @param {string} htmlString - 要用于创建元素的HTML字符串。  
 * @returns {Element|null} - 返回创建的DOM元素，如果无法创建则返回null。  
 */  
function createElementFromHTML(htmlString) {  
    const tempDiv = document.createElement('div')
    tempDiv.innerHTML = htmlString.trim()
    const newElement = tempDiv.firstChild
    if (newElement && newElement.nodeType === 1) {
        return newElement
    } else {
        return null
    }
}
selfPage.createElementFromHTML = createElementFromHTML