Question title
How to implement text type buttons
Problem description
Hope to display text type buttons in the cell, click to operate.
Solution
You can use the customLayoutfeature to customize button elements and bind corresponding events
Code example
const option: VTable.ListTableConstructorOptions = {
columns: [
// ......
{
field: 'worksCount',
title: 'operation',
width: 110,
customLayout: (args: VTable.TYPES.CustomRenderFunctionArg) => {
const { table, row, col, rect } = args;
const { height, width } = rect ?? table.getCellRect(col, row);
const container = new VTable.CustomLayout.Group({
height,
width,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap'
});
const editText = new VTable.CustomLayout.Text({
text: '编辑',
fontSize: 13,
fontFamily: 'sans-serif',
fill: '#2440b3', // #315efb
boundsPadding: [10, 0, 0, 10],
underline: 0,
cursor: 'pointer'
});
editText.stateProxy = (stateName: string) => {
if (stateName === 'hover') {
return {
fill: '#315efb',
underline: 1
};
}
};
editText.addEventListener('mouseenter', e => {
editText.addState('hover', true, false);
table.scenegraph.updateNextFrame();
});
editText.addEventListener('mouseleave', e => {
editText.removeState('hover', false);
table.scenegraph.updateNextFrame();
});
editText.addEventListener('click', e => {
console.log('edit click');
});
container.add(editText);
return {
rootContainer: container,
renderDefault: false
};
}
}
],
// ......
};
Results show
Complete sample code (you can try pasting it into the editor ):
const option = {
container: document.getElementById(CONTAINER_ID),
columns: [
{
field: 'bloggerId',
title: 'index'
},
{
field: 'worksCount',
title: 'operation',
style: {
fontFamily: 'Arial',
fontSize: 12,
fontWeight: 'bold'
},
width: 110,
customLayout: (args) => {
const { table, row, col, rect } = args;
const { height, width } = rect ?? table.getCellRect(col, row);
const container = new VTable.CustomLayout.Group({
height,
width,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap'
});
const editText = new VTable.CustomLayout.Text({
text: '编辑',
fontSize: 13,
fontFamily: 'sans-serif',
fill: '#2440b3', // #315efb
boundsPadding: [10, 0, 0, 10],
underline: 0,
cursor: 'pointer'
});
editText.stateProxy = (stateName) => {
if (stateName === 'hover') {
return {
fill: '#315efb',
underline: 1
};
}
};
editText.addEventListener('mouseenter', e => {
editText.addState('hover', true, false);
table.scenegraph.updateNextFrame();
});
editText.addEventListener('mouseleave', e => {
editText.removeState('hover', false);
table.scenegraph.updateNextFrame();
});
editText.addEventListener('click', e => {
console.log('edit click');
});
container.add(editText);
const deleteText = new VTable.CustomLayout.Text({
text: '删除',
fontSize: 13,
fontFamily: 'sans-serif',
fill: '#2440b3', // #315efb
boundsPadding: [10, 0, 0, 10],
underline: 0,
cursor: 'pointer'
});
deleteText.stateProxy = (stateName) => {
if (stateName === 'hover') {
return {
fill: '#315efb',
underline: 1
};
}
};
deleteText.addEventListener('mouseenter', e => {
deleteText.addState('hover', true, false);
table.scenegraph.updateNextFrame();
});
deleteText.addEventListener('mouseleave', e => {
deleteText.removeState('hover', false);
table.scenegraph.updateNextFrame();
});
deleteText.addEventListener('click', e => {
console.log('delete click');
});
container.add(deleteText);
return {
rootContainer: container,
renderDefault: false
};
}
}
],
records: [
{
bloggerId: 1,
},
{
bloggerId: 2,
},
{
bloggerId: 3,
},
{
bloggerId: 4,
},
{
bloggerId: 5,
},
{
bloggerId: 6,
}
],
defaultRowHeight: 40
};
const instance = new VTable.ListTable(option);
Related Documents
Related api: https://www.visactor.io/vtable/guide/custom_define/custom_layout
Top comments (0)