ag-grid 单元格编辑-下拉框
一、基本下拉框
效果如下:
选中后的值直接就是界面显示的值(也是代码中定义的值)。效果如下:
二、有id 的下拉框
这个下拉框跟平常用的select 框类似,设置id和value,在界面选择的时候显示的是value值,但是选中值后,后台获取到的被选中值是value对应的id值。具体效果如下:
以上两个例子的代码如下:
<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>单元格编辑-下拉框选择</title><script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script></head><body><div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div><script>const attendanceMappings = {male: '男',Female: '女',"": "",};const attStageRender = () => {return Object.keys(attendanceMappings);};//定义表格列var columnDefs = [{headerName: '姓名',field: 'name'}, {headerName: '性别',field: 'sex',editable: true,cellEditor: "agSelectCellEditor",cellEditorParams: { values: attStageRender() }, // 选中值为显示值的对应字段,例如本个例子中的英文。filterParams: {valueFormatter: (params) => {return attendanceMappings[params.value];},},valueFormatter: (params) => {return attendanceMappings[params.value];},}, {headerName: '年龄', field: 'age',editable: true,cellEditor: "agSelectCellEditor",//编辑时 显示下拉列表 cellEditorParams: { values: ["18", "19", "20", ""] } // 简单的下拉框设置,选中的值即定义的值。}, {headerName: '籍贯',field: 'jg'}, {headerName: '省份',field: 'sf',}, {headerName: '地址',field: 'dz'},];//与列对应的数据; 属性名对应上面的fieldvar data = [{ name: '张三', sex: 'male', age: '18', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },{ name: '李四', sex: 'male', age: '19', 'jg': '中国', 'sf': ' 浙江', 'dz': '杭州市古墩路12号' },{ name: '王舞', sex: 'Female', age: '20', 'jg': '中国', 'sf': ' 浙江', 'dz': '杭州市古墩路32号' },{ name: '李梅', sex: 'Female', age: '19', 'jg': '中国', 'sf': ' 浙江', 'dz': '杭州市古墩路39号' },];const onSourceCellEdited = (event) => {debugger;var itxst = JSON.stringify(event.data);alert(`选中的值为:${itxst}`);};//将列和数据赋给gridOptions var gridOptions = {columnDefs: columnDefs, //设置列名rowData: data, //设置数据onCellEditingStopped: onSourceCellEdited};//在dom加载完成后 初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {var eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的IDnew agGrid.Grid(eGridDiv, gridOptions);});</script>
</body></html>
ag-grid 单元格编辑-下拉框相关推荐
- Pyqt5 在表格中单元格设置下拉框,并根据选项改变背景颜色
关于怎么在表格中单元格设置下拉框,并根据选项改变背景颜色 def table_combox_init(self):combox_statePlm_jria_list = ['', '无', 'O', ...
- 基于java + easyExcel实现模板填充生成动态模板并设置指定单元格为下拉框样式
需求描述:java后端开发过程中,为了满足动态生成excel模板并设置指定单元格为下拉框,且下拉框的数据项来源为动态查询的需求,在基于easyExcel的情况下,使用模板填充的方式,完成该需求. 1. ...
- 单元格只能下拉框选_excel给单元格添加下拉菜单列表无需按键盘用鼠标选择即可...
excel给单元格添加下拉菜单列表无需按键盘用鼠标选择即可 时间:2013-12-08 作者:snow 来源:互联网 为了方便快速的输入数据,通常情况下我们会给单元格添加一个下拉菜单,如此一来 ...
- WPF DataGrid 单元格实现下拉框选项
文章目录 前言 一.问题 二.示例 1.实现效果 2.描述 三.解决方法 四.总结 前言 需要实现DataGrid控件单元格下拉框选项,DataGrid数据来源是数据库中的表 第一次写博客,尝试一下 ...
- 单元格只能下拉框选_数据有效性定义下拉框只能选择一个如何实现选择多个选项...
相信表亲们很多人用过数据有效性,通过数据有效性定义序列,在下拉框中选择想要的选项,然而,数据有效性定义通过下拉框只能选择一个选项,如果要选择多个选项,怎么办呢?我们看看下面的动画: 看这个动画是不是感 ...
- EasyExcel多列单元格设置下拉框
项目场景: EasyExcel官网文档地址: https://easyexcel.opensource.alibaba.com/docs/current/ 项目场景:实际开发中,需要用到很多下拉框去供 ...
- ALV单元格设置下拉框固定值
老规矩先上效果图: 1.输出ALV 加个字段 2.设置下拉框的值 FORM SET_DRDN_TABLE .DATA:LT_DROPDOWN TYPE LVC_T_DROP,LS_DROPDOWN T ...
- Excel - 如何给单元格加上下拉框
当你使用下拉列表来限制人们在单元格中的输入时,数据输入会更快.更准确.当有人选择一个单元格时,下拉列表的向下箭头就会出现,可以点击它并进行选择. 创建一个下拉列表 / Create a drop-do ...
- poi怎么设置某个单元格为下拉框_java excel 多选下拉列表设置
方案二 方案二的思路是在excel中添加一个隐藏的sheet存放数据源(下拉的数据),在真正需要下拉的sheet单元格写入属性. 1.需要使用到的util类 package com.excel.sel ...
最新文章
- 【NLP招聘动态】太难啦!面试官盘点NLP近五年招聘动态
- Android Studio你不知道的调试技巧
- PHP、Node、Ruby和Python应用,漏洞修复
- pandas数据存储于读取
- Html中value和name属性的作用
- 贵广网络跨界转型 实现智慧城市的平台创新
- 苹果CMSV10绿色毛毛虫主题模板
- ReactJs 第三章 React元素的渲染
- 关于在MathType中内置样式的一些小知识
- 深交所与6家股交中心深化区块链合作
- dw二级联动下拉菜单插件 宋君墨_Excel下拉菜单不会做?15秒教会你制作一二三级联动下拉菜单,从此做表不求人!...
- while求和java,while语句基本练习(求和思想,统计思想)
- Apache Kylin权威指南3.1 为什么要增量构建
- pandas筛选某个列值是否位于某个列表内
- react-testing-library
- 服务器集成显卡性能,主流显卡参数和性能对比
- 前端笔记:飞机航线图
- 使用极狐GitLab限制开发者使用CI/CD的权限,三种方案
- 【ICPC-369】uva 12096 The SetStack Computer
- 动态规划(练习题目)
热门文章
- 用 HTML 元素实现自定义的滚动条
- centos基础镜像做mysql镜像_使用docker 基于centos7制作mysql镜像
- Python入门(三)--- 元组,字典,集合
- NLP经典论文:Attention、Self-Attention、Multi-Head Attention、Transformer 笔记
- html表格占位符,HTML表格
- 亚阈值区MOSFET阈值电压Vth随温度变化曲线仿真【Cadence】
- Arduino官方网站及Arduino爱好者博客
- ASP入门学习(一)准备阶段
- Python使用正则表达式识别代码中的中文、英文和数字实例演示
- 如何自己恢复丢失的文件丨迅龙数据恢复丨