如何解决Ag-grid上的Clickable事件
如何在我的ag-grid中的列中确定可单击状态,如下所示:-
我还如何在某个列中呈现动态内容,例如图片,按钮...等?
解决方法
您可以编写自己的自定义cell renderer以显示更复杂的html。这是一些例子
创建一个单元格渲染器
如果使用React。单元格渲染器可以只是另一个React组件,用于显示所需的任何html结构。这是指向您提供的值的google图片结果的链接
function LinkCellRenderer(props) {
return (
<a
target="_blank"
rel="noopener noreferrer"
href={"https://www.google.com/search?tbm=isch&q=" + props.value}
>
{props.value}
</a>
);
}
这是另一个例子。这是一个按钮单元格渲染器,在单击时显示当前行数据
function ButtonCellRenderer(props) {
const onClick = () => {
const { data } = props.node;
let message = "";
Object.keys(data).forEach((key) => {
message += key + ":" + data[key] + "\n";
});
alert(message);
};
return <button onClick={onClick}>Click me</button>;
}
用法
<AgGridReact
columnDefs={[{
headerName: "Country",field: "country",width: 120,cellRenderer: "LinkCellRenderer"
},{
headerName: "Action",field: "action",width: 100,cellRenderer: "ButtonCellRenderer"
},...]}
frameworkComponents={{
LinkCellRenderer,ButtonCellRenderer
}}
/>
实时示例
,@NearHuscarl他有一个很好的答案
这是经过更多研究后我的简单实现方式
columnDefs:
[
{
headerName: "Vehicle Ident number",field: "VIN",filter: true,checkboxSelection: true,cellRenderer: function (params) {
return '<span><a href="/car/view/'+params.value+'">'+params.value+'<a/></span>'
}
},{
headerName: "Plate Source",field: "REGISTRATION_PLATE",filter: true}
],
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。