ag-grid 单元格编辑-下拉框

news/2024/10/31 5:36:39/

一、基本下拉框

        效果如下:

 选中后的值直接就是界面显示的值(也是代码中定义的值)。效果如下:

 

二、有id 的下拉框

        这个下拉框跟平常用的select 框类似,设置idvalue,在界面选择的时候显示的是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>


http://www.ppmy.cn/news/516815.html

相关文章

Linux ag命令的安装及使用

一、ag命令安装 yum -y install the_silver_searcher二、ag命令常用参数 ag命令类似grep 和 find&#xff0c;但是执行效率比grep、find高。 ag -g <File Name> 类似于 find . -name <File Name> [rootserver01 etc]# ag -g passwd security/opasswd passwd- pass…

vue2.6 Ag-grid 使用

中文文档&#xff1a;ag-grid中文教程 - itxst.com 一.HTML 结构 <ag-grid-vueclass"ag-theme-alpine"id"myGrid":rowData"rowData" //数据源cellEditingStopped"onCellEditingStopped" // 输入停止直接执行 数据保存事件:gridOp…

TypeScript的基础类型

1. boolean类型&#xff1a; boolean表示布尔值类型&#xff0c;即true和false。例&#xff1a; let isDone: boolean false;2. number类型&#xff1a; number表示数字类型&#xff0c;包括整数和浮点数。例&#xff1a; let decimal: number 6; let hex: number 0xf00…

ag-grid 自适应大小

ag-grid 表格需要自适应浏览器窗口大小&#xff0c;以下为没有自适应的情况&#xff1a; 以下为已经自适应的情况&#xff1a; 如果需要自适应&#xff0c;统一调用api&#xff1a;sizeColumnsToFit() 即可&#xff0c;只不过调用的触发事件不同。 分别有以下三种情况出现&…

快速上手最棒的网格框架ag-Grid

2020/03补充&#xff1a;本文是AgGrid的使用教程及入门手册&#xff0c;如果想了解Aggrid的开发理念和设计思想&#xff0c;可以参考我最新的文章&#xff1a;《AgGrid框架的使用感受及前景分析》 由于对aggrid由衷的感谢, 又忍不住写了一篇软文来推广它(其实主要是为了弥补我把…

使用ag-grid的cellRenderer渲染单元格

使用ag-grid的cellRenderer渲染单元格 这里只是一个简单的例子&#xff0c;具体如何使用&#xff0c;还得看官方文档 https://www.ag-grid.com/javascript-grid-cell-rendering/?frameworkangular 1.在需要渲染的单元格基本信息中添加一个组件 { headerName: "Square&quo…

ag 搜索工具参数详解

ag 搜索工具参数详解 Ag 是类似ack&#xff0c; grep的工具&#xff0c;它来在文件中搜索相应关键字。 官方列出了几点选择它的理由&#xff1a; 它比ack还要快 &#xff08;和grep不在一个数量级上&#xff09;它会忽略.gitignore和.hgignore中的匹配文件如果有你想忽略的文…

ag-grid 使用记录

ag-grid介绍 ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能.目前项目使用的是企业版. 企业版与社区版的功能区别请参看功能比较 Vue Data Grid: Community…