
先来看一段完整的代码示例,它同时包含了 CSS 与 JS 两部分,共同实现了一个具备行高控制、可排序、且支持自定义样式的表格列功能。下面是具体的实现细节:
// CSS 代码
.x-row-class {
line-height: 30px;
}
// JS 代码
},{
text: '技能分配',
flex: 1,
width: 150,
dataIndex: 'skillDistribut',
sortable: true,
renderer: function(value, metaData, record, rowIndex, columnIndex, store){
metaData.tdAttr = "data-qtip='" + value + "'";
if (record.data.outboundAmount == 1) {
metaData.tdCls = 'x-grid-record-red';
}
return value;
}
},{
这段代码的核心逻辑在于 `renderer` 函数——当 `outboundAmount` 等于 1 时,会为当前单元格添加一个红色的 CSS 类(`x-grid-record-red`),同时借助 `data-qtip` 属性实现鼠标悬停时的提示信息显示。而 CSS 部分则统一设定了该列的行高,确保整体排版整齐、视觉效果一致。