hooks useModule自定义hooks (二次封装AgGridReact ag-table)自定义表头,自定义表头搜索

场景业务:

多次运用AgGridReact的table 列表

思路:

运用自定义hooks进行二次封装:
通用配置例如:传参的参数,传参的url,需要缓存的key这些键值类
定制化配置例如:需要对table 的一些定制化传参,是否需要分页,表头配置,表头搜索配置

通用配置:

  const { SettingTableRender, TableListRender, getTableData,resetSesstion,tableData } = useTableModule({renderKey: {companyName: renderContext,contacts: EllipsisCommont,industries: industriesCell,serviceTypes: bdInfosServiceTypes,businessProgress: bdInfosBusinessProgress,latestFollowUpDate,latestNoteCreatedTime,associationLabel,estimatedDealDate,dealDate:dealTime,website:websiteCell,salesLeadOwner:ownerCell,businessOpportunityLeader:ownerCell,accountManager:ownerCell},configKey: 'COMPANY_AFFILIATES',tableUrl: 'apiurl',tableRequest: getTableList,setParamsList,sessionKey:'tableList'});

定制配置:

    {/* 列表 */}{TableListRender({pagination: false,customColumn,key: tabActive,filterSearchRender: {companyName: {render: SelectCompanyName,},contacts: {render: SelectCompanyName,},associationLabel: {render: Select,tPropty: {options: associationLabelOp,},},industries: {render: TreeSelect,tPropty: {treeData: listEnum('industry'),showCheckedStrategy: TreeSelect.SHOW_PARENT,treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'id', label: 'label', children: 'children' },},},serviceTypes: {render: TreeSelect,tPropty: {treeData: listEnum('serviceType'),showCheckedStrategy: TreeSelect.SHOW_PARENT,treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'name', label: 'label', children: 'children' },},},businessProgress: {render: TreeSelect,tPropty: {treeData: listEnum('businessProgress').filter((i) =>['ACCOUNT_BUSINESS_NOT_FOLLOWED_UP','ACCOUNT_BUSINESS_CUSTOMER_NOT_CONTACTED','ACCOUNT_BUSINESS_PLAN_COMMUNICATION','ACCOUNT_BUSINESS_PLAN_VERIFICATION','ACCOUNT_BUSINESS_NEGOTIATION','ACCOUNT_BUSINESS_CONTRACTED','ACCOUNT_BUSINESS_LOST',].includes(i.name)),treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'value', label: 'label', children: 'children' },},},salesLeadOwner: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},businessOpportunityLeader: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},accountManager: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},},})}

非常灵活的表单,基于ag-table 的基础功能拖拽,自定义宽度的前提下额外拓展业务需求:自定义表头,自定义表头的sort,以及自定义搜索功能。

重点是在于思路的拓展。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/71828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot最简单方式实现自定义异常页面(404)

最简单的方式实现所有自定义异常页面(如 404、500 等)是通过 静态资源文件 或 模板引擎 来实现。 方法 1:使用静态资源文件(最简单) Spring Boot 默认会在 src/main/resources/static 或 src/main/resources/public …

django下防御race condition漏洞(竞争型漏洞)

目录 竞争型漏洞 概念 常见类型及示例 环境搭建 ​编辑漏洞复现 ucenter/1/ ucenter/2/ ucenter/3/ ucenter/4/ 总结 悲观锁 乐观锁 竞争型漏洞 概念 竞争型漏洞,也称为竞态条件漏洞(Race Condition Vulnerability),…

用Python写一个算24点的小程序

一、运行界面 二、显示答案——递归介绍 工作流程&#xff1a; 1. 基本情况&#xff1a;函数首先检查输入的数字列表 nums 的长度。如果列表中只剩下一个数字&#xff0c;它会判断这个数字是否接近 24&#xff08;使用 abs(nums[0] - 24) < 1e-10 来处理浮点数精度问题&…

PostgreSQL 18新特性之虚拟生成列

PostgreSQL 12 提供了生成列&#xff08;GENERATED ALWAYS AS STORED&#xff09;功能&#xff0c;但是只能支持存储型的生成列&#xff0c;需要占用存储空间&#xff0c;更新成本高。 为此&#xff0c;PostgreSQL 18 即将引入一个新的增强&#xff1a;虚拟生成列。这种类型的…

GitHub上传项目

总结&#xff08;有基础的话直接执行这几步&#xff0c;就不需要再往下看了&#xff09;&#xff1a; git init 修改git的config文件&#xff1a;添加:[user]:name你的github用户名 email你注册github的用户名 git branch -m master main git remote add origin 你的URL gi…

常见排序算法深度评测:从原理到10万级数据实战

常见排序算法深度评测&#xff1a;从原理到10万级数据实战 摘要 本文系统解析冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序和基数排序8种经典算法&#xff0c;通过C语言实现10万随机数排序并统计耗时。测试显示&#xff1a;快速排序综合性能最优&…

动态规划填表技巧:固定最后一个数 vs 固定倒数第二个数

在动态规划中&#xff0c;填表时固定最后一个数还是倒数第二个数&#xff0c;取决于问题的定义和状态转移方程的设计。 目录 1. 固定最后一个数 适用场景 特点 示例 2. 固定倒数第二个数 适用场景 特点 示例 3. 固定最后一个数与倒数第二个数的对比 4. 总结 1. 固定最…

【C】链式二叉树算法题2

目录 1 另一棵树的子树 1&#xff09; 题目描述 示例1&#xff1a; 示例2&#xff1a; 2&#xff09; 算法解析 3&#xff09; 代码 2 二叉树的遍历 1&#xff09; 问题描述 2&#xff09; 算法解析 3&#xff09; 代码 3 总结 1 另一棵树的子树 leetcode链接…

配置Hadoop集群

Hadoop的运行模式 本地运行&#xff1a;在一台单机上运行&#xff0c;没有分布式文件系统&#xff0c;直接读写本地操作系统的文件系统。特点&#xff1a;不对配置文件进行修改&#xff0c;Hadoop 不会启动 伪分布式&#xff1a;也是在一台单机上运行&#xff0c;但用不同的 …

python办公自动化--数据可视化(pandas+matplotlib)--生成条形图和饼状图

前言 前几天我们学习了pandas读取数据&#xff0c;还学习了如何用patplotlib绘制柱状图和折线图。 今天我们继续学习&#xff0c;如何绘制条形图和饼状图。 一、课程回顾-pandas读取数据 1.示例数据文件 这里我们用到的依旧是d盘底下的这个excel工作簿&#xff0c;这个工作簿…

基于大模型的结节性甲状腺肿诊疗全流程预测与方案研究报告

目录 一、引言 1.1 研究背景与目的 1.2 研究意义 1.3 国内外研究现状 二、大模型预测原理与方法 2.1 相关大模型概述 2.2 数据收集与预处理 2.3 模型训练与验证 三、术前预测与评估 3.1 结节性质预测 3.1.1 良恶性判断 3.1.2 与传统诊断方法对比 3.2 手术风险预测…

不同开发语言对字符串的操作

一、字符串的访问 Objective-C: 使用 characterAtIndex: 方法访问字符。 NSString *str "Hello, World!"; unichar character [str characterAtIndex:0]; // 访问第一个字符 H NSLog("%C", character); // 输出: H NSString 内部存储的是 UTF-16 编…

Java开发者如何接入并使用DeepSeek

目录 一、准备工作 二、添加DeepSeek SDK依赖 三、初始化DeepSeek客户端 四、数据上传与查询 五、数据处理与分析 六、实际应用案例 七、总结 【博主推荐】&#xff1a;最近发现了一个超棒的人工智能学习网站&#xff0c;内容通俗易懂&#xff0c;风格风趣幽默&#xff…

S19文件格式详解:汽车ECU软件升级中的核心镜像格式

文章目录 引言一、S19文件格式的起源与概述二、S19文件的核心结构三、S19在汽车ECU升级中的应用场景四、S19与其他格式的对比五、S19文件实例解析六、工具链支持与安全考量七、未来趋势与挑战结语引言 在汽车电子控制单元(ECU)的软件升级过程中,S19文件(也称为Motorola S-…

CTF杂项——[suctf 2019]签到题

base64转图片 可以直接用随波逐流 得到flag SUCTF{ffffffffT4nk}

【Python】整数除法不正确,少1的问题,以及有关浮点数转换的精度问题

1. 问题 今天在做leetcode 不同路径 的时候发现了个问题 对于m53 n4class Solution:def uniquePaths(self, m: int, n: int) -> int:rlt 1for i in range(0, m-1):rlt * (m n - 2 - i)for i in range(0, m-1):rlt / (i 1)return int(rlt)为什么这个结果是 26234class S…

AI无代码平台

以下是目前支持快速开发产品的高生产力免费AI无代码平台推荐&#xff0c;按功能和适用场景分类&#xff1a; 一、全栈应用开发类 Bolt.DIY DeepSeek-R1 无需编写代码即可开发全栈应用&#xff0c;提供免费API和无速率限制&#xff0c;支持AI编码助手与自动化流程 。 优势&…

Gini系数的应用 - 指标波动贡献分析

基尼系数的定义 基尼系数是衡量数据分布不均衡程度的指标&#xff0c;取值范围在0到1之间&#xff1a; 0 表示完全均衡&#xff08;所有值相等&#xff09;。1 表示完全不均衡&#xff08;所有值集中在一个点&#xff09;。 基尼系数的计算公式 假设有 n n n 个数据点&…

第一节: 网络基础与参考模型

深入理解OSI七层模型与TCP/IP四层模型:网络工程师的入门指南 在网络通信的世界中,OSI七层模型和TCP/IP四层模型是理解网络架构的基础。无论是配置路由器、排查网络故障,还是设计复杂的网络系统,掌握这些模型的分层结构及其功能都是必不可少的。本文将从新手角度出发,深入…

HTTP拾技杂谈

HTTP拾技杂谈 简单聊聊HTTP中的那些东西 文章目录 HTTP拾技杂谈前言HTTP协议1.请求从客户端到服务器端的4个步骤一般客户端请求如下&#xff1a;服务端响应如下 2.Keep-AliveHTTP方法Cookie 总结 前言 超文本传输协议&#xff08;Hypertext Transfer Protocol &#xff0c;HT…