ag-grid 使用cellRendererSelector或cellRenderer渲染单元格,数据更新联动

例如A组件数据更新后,需要B组件做出处理

1.渲染两个组件

 const columnDefs: (ColDef | ColGroupDef)[] = [ {
        headerName: 'Type',//渲染出的header
        field: 'Type',//关联的字段
        editable: false,//false为不可编辑
        // cellRenderer: TypeCellRender,//渲染自定义组件
        cellRendererSelector: function (row) {
          return { component: row.value ? TypeCellRender : '' }
        },//某中条件下渲染自定义组件
      },
      {
        headerName: 'Value',
        field: 'Value',
        cellRendererSelector: function (row) {
          return { component: row.value ? valueCellRender : '' }
        },
        editable: false,
        cellRendererParams: {
          updateFunction: params.updateData,
          updateTypeFn: params.updateType
        },//将父组件的方法塞入自定义组件,供其使用
        cellStyle: { padding: 0 },//修改样式
      }]

2.A组件定义监控方法,在需要监控数据更新的地方调用

 statusUpdateListener(dataID: string) {
        if (this.status === 'Success') {
            const event = new CustomEvent(`${dataID}-statusChanged`, {
                detail: {
                    status: 'Success'//可传参数
                }
            });
            document.dispatchEvent(event);
        }
    }

3.B组件定义接收数据更新的方法,并作出处理

updateListener(dataID: string) {
     document.addEventListener(`${dataID}-statusChanged`, (e: any) => {
            this.disable = true//处理数据
        }, false);
    }
    
agInit(params: ICellRendererParams): void {
     this.params = params;
     this.updateListener(this.params.data.id)//调用方法
 }

statusChanged用来识别,数据监控

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
package BookTest; import java.awt.*; import java.awt.event.*; import java.util.AbstractQueue; import java.util.Vector; import javax.swing.*; import javax.swing.table.*; import javax.swing.tree.DefaultMutableTreeNode; import javax.swing.tree.DefaultTreeCellRenderer; import javax.swing.tree.DefaultTreeModel; import javax.swing.tree.TreeSelectionModel; import javax.swing.event.*; import javax.swing.table.TableColumnModel; //import DbHelp.OperatorJobs; import Dao.ArrayBook; public class Test extends JFrame { public JPanel jp=null; public String aa; //JTable jTable1 = new JTable(); public JTable jTable1=null; private JTree jTree1; DefaultTableModel mode; private JScrollPane scrollPane = null; DefaultMutableTreeNode node; JButton[] btn={new JButton("增加"),new JButton("删除"),new JButton("修改"),new JButton("查询"),new JButton("重置")}; public JTextField[] txt ={new JTextField(),new JTextField(),new JTextField(),new JTextField(),new JTextField(),new JTextField()}; public String[] str1={"1","summer","boy","20","",""}; public String[] str2={"2","wulei","girl","19","",""}; public String[] str3={"3","west","boy","20","",""}; public String[] str4={"4","fish","girl","18","",""}; public String[] str5={"5","youku","boy","21","",""}; public String[] str6={"6","aa","boy","21","",""}; public String[][] tempData1={str1,str2,str3,str4,str5,str6}; public String[] aa1={"1","summer","boy","20","123","123"}; public String[] aa2={"2","wulei","girl","19","123",""}; public String[] aa3={"3","west","boy","20","123",""}; public String[] aa4={"4","fish","girl","18","1",""}; public String[] aa5={"5","youku","boy","21","12",""}; public String[] aa6={"6","aa","boy","21","123",""}; public String[][] tempData4={aa1,aa2,aa3,aa4,aa5,aa6}; //设置表头数据 public String[] tempTitle={"ID","标题","内容","作者","时间","是否选中"}; //设置表格的数据集合 Vector v1=new Vector(); Vecto
目录 第 1 章 : 简介 目标读者 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 系统要求 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 关于本文档 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 印刷惯例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 本手册中使用的术语 . . . . . . . . . . . . . . . . . . . . . . . . 2 其他资源 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 第 2 章 : 关于 ActionScript 3.0 组件 使用组件的优点 . . . . . . . . . . . . . . . . . . . . . . . . . . 3 组件类型 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 在文档中添加和删除组件 . . . . . . . . . . . . . . . . . . . . . . 5 查找组件的版本 . . . . . . . . . . . . . . . . . . . . . . . . . . 7 ActionScript 3.0 事件处理模型 . . . . . . . . . . . . . . . . . . . 7 一个简单的应用程序 . . . . . . . . . . . . . . . . . . . . . . . . 8 第 3 章 : 使用组件 组件体系结构 . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 使用组件文件 . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 调试组件应用程序 . . . . . . . . . . . . . . . . . . . . . . . . . 17 设置参数和属性 . . . . . . . . . . . . . . . . . . . . . . . . . . 17 库 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 调整组件大小 . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 实时预览 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 处理事件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 使用显示列表 . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 使用 FocusManager . . . . . . . . . . . . . . . . . . . . . . . . 23 使用基于 List 的组件 . . . . . . . . . . . . . . . . . . . . . . . 24 使用 DataProvider . . . . . . . . . . . . . . . . . . . . . . . . 24 使用 CellRenderer . . . . . . . . . . . . . . . . . . . . . . . . 31 使组件具有辅助功能 . . . . . . . . . . . . . . . . . . . . . . . . 37 第 4 章 : 使用 UI 组件 使用 Button 组件 . . . . . . . . . . . . . . . . . . . . . . . . . 39 使用 CheckBox 组件 . . . . . . . . . . . . . . . . . . . . . . . . 41 使用 ColorPicker 组件 . . . . . . . . . . . . . . . . . . . . . . .43 使用 ComboBox 组件 . . . . . . . . . . . . . . . . . . . . . . . . 45 使用 DataGrid 组件 . . . . . . . . . . . . . . . . . . . . . . . . 48 使用 Label 组件 . . . . . . . . . . . . . . . . . . . . . . . . . 53 使用 List 组件 . . . . . . . . . . . . . . . . . . . . . . . . . . 55 使用 NumericStepper 组件 . . . . . . . . . . . . . . . . . . . . . 59 使用 ProgressBar 组件 . . . . . . . . . . . . . . . . . . . . . . 61 使用 RadioButton 组件 . . . . . . . . . . . . . . . . . . . . . . 66 使用 ScrollPane 组件 . . . . . . . . . . . . . . . . . . . . . . . 69 使用 Slider 组件 . . . . . . . . . . . . . . . . . . . . . . . . . 71 使用 TextArea 组件 . . . . . . . . . . . . . . . . . . . . . . . . 73 使用 TextInput 组件 . . . . . . . . . . . . . . . . . . . . . . . 76 使用 TileList 组件 . . . . . . . . . . . . . . . . . . . . . . . . 78 使用 UILoader 组件 . . . . . . . . . . . . . . . . . . . . . . . . 81 使用 UIScrollBar 组件 . . . . . . . . . . . . . . . . . . . . . . .82 第 5 章 : 自定义 UI 组件 关于 UI 组件自定义 . . . . . . . . . . . . . . . . . . . . . . . . 85 设置样式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 关于外观 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 自定义 Button 组件 . . . . . . . . . . . . . . . . . . . . . . . . 89 自定义 CheckBox 组件 . . . . . . . . . . . . . . . . . . . . . . . 91 自定义 ColorPicker 组件 . . . . . . . . . . . . . . . . . . . . . 93 自定义 ComboBox 组件 . . . . . . . . . . . . . . . . . . . . . . . 94 自定义 DataGrid 组件 . . . . . . . . . . . . . . . . . . . . . . . 96 自定义 Label 组件 . . . . . . . . . . . . . . . . . . . . . . . . 100 自定义 List 组件 . . . . . . . . . . . . . . . . . . . . . . . . 101 自定义 NumericStepper 组件 . . . . . . . . . . . . . . . . . . . 104 自定义 ProgressBar 组件 . . . . . . . . . . . . . . . . . . . . . 105 自定义 RadioButton 组件 . . . . . . . . . . . . . . . . . . . . . 107 自定义 ScrollPane 组件 . . . . . . . . . . . . . . . . . . . . . 108 自定义 Slider 组件 . . . . . . . . . . . . . . . . . . . . . . . 109 自定义 TextArea 组件 . . . . . . . . . . . . . . . . . . . . . . 110 自定义 TextInput 组件 . . . . . . . . . . . . . . . . . . . . . . 112 自定义 TileList 组件 . . . . . . . . . . . . . . . . . . . . . . 113 自定义 UILoader 组件 . . . . . . . . . . . . . . . . . . . . . . 115 自定义 UIScrollBar 组件 . . . . . . . . . . . . . . . . . . . . . 115 第 6 章 : 使用 FLVPlayback 组件 使用 FLVPlayback 组件 . . . . . . . . . . . . . . . . . . . . . . 117 自定义 FLVPlayback 组件 . . . . . . . . . . . . . . . . . . . . . 132 使用 SMIL 文件 . . . . . . . . . . . . . . . . . . . . . . . . . 141 第 7 章 : 使用 FLVPlayback 字幕组件 使用 FLVPlaybackCaptioning 组件 . . . . . . . . . . . . . . . . . 148 使用 Timed Text 字幕 . . . . . . . . . . . . . . . . . . . . . . 150 将提示点用于字幕 . . . . . . . . . . . . . . . . . . . . . . . . 155
杰笛表格 JTable应该是Swing中用的最多的组件。 为了充分发挥JTable的功能,我们引入了一专门为JTable制作的产品叫杰笛表格,它提供了很多和JTable有关的组件和功能。 该产品有许多JTable的子类:从基础的JideTable开始,到CellSpantable,CellStyleTable,SortableTable,然后更先进的TreeTable,PropertyTable和HierarchicaTable。此外,我们建立了许多不同的数据类型CellEditor和CellRenderer,如日期,颜色,插入,字体。过滤也是杰笛表格另一个重要功能。它涵盖不只是JTable,还包括JList和JTree。您务必运行我们提供的演示程序才能体会到我们在该产品上花了多少精力,所有这些都是为了让您能更容易地进一步开发。 功能介绍 界面组件 PropertyGrid - 属性表格,一种两列的JTable,用来显示任何内嵌结构的对象的属性 SortableTable - 排序表,支持多列的排序功能 FilterableTableModel - 可过滤的表模型,支持针对每一列增加过滤功能 HierarchicalTable - 分级表,对表的一行嵌套任何控件作为子控件 row TreeTable - 树形表,联合使用树控件和表控件来显示层次化分级数据 CellSpanTable - 合并单元格,支持单元格的合并功能 CellStyleTable - 多样式单元格,支持每一个单元格自定义风格 JideTable -自动监听表格单元格编辑操作比如在单元格开始编辑之前或者单元格结束编辑之前),支持有效性检查、支持根据单元格内容自动调节表格的行间距和列间距 TableScrollPane - 通过扩展JideScrollPane 组件来实现行列的头,尾使用一个唯一的表数据模型 TableSplitPane - 使用一个唯一的表数据模型来创造几个不同的表格。每一个表格都可以独立定义列头和;列尾的样式 ColorComboBox and ColorChooserPanel - 一套颜色选择控件,从面板选择到组合框,到单元格编辑,支持用户自定义颜色模式 DateComboBox and DateChooserPanel - 一套月份/日期选择控件,从面板选择到组合框,到单元格编辑,支持国际化和本地化(i18n和l10n) AbstractComboBox - 支持用任何控件做弹出式面板 FilterableListModel - 支持列表的过滤功能 FilterableTreeModel - 支持对树模型任何节点的过滤功能s SortableListModel - 支持列表的排序功能 SortableTreeModel - 支持任何树模型每个节点的排序功能 QuickTableFilterField and QuickFilterPane - 简化一个超大型表格查找和过滤的操作步骤,提升效率 QuickListFilterField and QuickTreeFilterField -支持在一个大型的集合或者树的数据域中敏捷查找和过滤 工具类 归一化的编辑/渲染机制(Centralized cell editor and renderer mechanism )- 自定义单元格编辑器并放置在一个地方,然后通过应用程序来使用它 归一化的对象转换机制(Centralized object converter mechanism) -自定义从字符串到任何对象的转换 归一化的对象比较机制(Centralized object comparator mechanism )-自定义对象的比较,并能在排序时被排序表使用 表实用类TableUtils class - 收集一些JTable有用功能的实用类。 集合实用类ListUtils class -收集一些JTable有用功能的实用类 树实用类 -收集一些Jtree有用功能的实用类详细的功能列表
如果你想在 ag-grid-vue3 中使用 element-plus 作为 cellRenderer,你可以按照以下步骤进行操作: 1. 安装 element-plus 你需要先安装 element-plus,可以通过 npm 或者 yarn 进行安装。具体安装方式可以参考 element-plus 的官方文档。 2. 创建 cellRendererag-grid-vue3 中,你可以通过创建一个 Vue 组件来作为 cellRenderer。因此,你需要创建一个 Vue 组件,并在其中使用 element-plus 组件来渲染单元格内容。例如,你可以创建一个名为 `MyCellRenderer` 的组件,代码如下: ``` <template> <el-button type="primary" size="small" @click="onButtonClick">{{ params.value }}</el-button> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ props: ['params'], methods: { onButtonClick() { // 在这里可以处理按钮点击事件 } } }) </script> ``` 在这个组件中,我们使用了 element-plus 的 `el-button` 组件来渲染单元格内容。当用户点击按钮时,我们可以在 `onButtonClick` 方法中进行相应的处理。 3. 在 ag-grid-vue3 中使用 cellRenderer 最后,你需要在 ag-grid-vue3 中使用刚才创建的 cellRenderer。具体做法是,在 `columnDefs` 中指定 `cellRendererFramework` 属性为你创建的组件。例如,你可以这样定义一个列: ``` { field: 'name', headerName: 'Name', cellRendererFramework: MyCellRenderer } ``` 在这个例子中,我们将 `cellRendererFramework` 属性指定为 `MyCellRenderer` 组件,这样在单元格中就会渲染我们定义的 element-plus 组件了。 希望这个回答能够帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值