ag-grid 单元格编辑-下拉框
生活随笔
收集整理的這篇文章主要介紹了
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 单元格编辑-下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle Solaris 11.4安
- 下一篇： 安装subversion