ag-grid 表格数据更新
生活随笔
收集整理的這篇文章主要介紹了
ag-grid 表格数据更新
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 有時候我們會涉及到數據更新，但是又不想刷新整個頁面，那么就可以單獨對表格中的數據進行更新。以下有三種更新情況：表格整個數據的更新；更新一行數據；更新單元格數據。
最初的表格數據如下圖：
?一 更新整個表格的數據
? 使用setRowData方法。
function resetGrid() {//新的數據項const Newdata = [{ id: "dd", name: '小d', sex: '女', age: '5' },{ id: "ee", name: '小m', sex: '男', age: '35' },{ id: "ff", name: '小h', sex: '男', age: '11' }];//調用接口重新設置數據gridOptions.api.setRowData(Newdata);}更新后的表格：
二 更新行數據
? ? ? ? 1.使用setData方法。
function bySetRows() {// #region 指定更新第幾行的數據 // const rowNode = gridOptions.api.getRowNode(3);//獲取表格第3行數據節點// //需要更新的數據// const newRow = {// id: "dd",// name: '更新的行',// sex: '無性別',// age: 10000000000// };// rowNode.setData(newRow);// #endregion // --------------------------------------------------------------------------------------------------- // #region 根據列中的id更新數據 //步驟：首先在源數據中，需要有id這一列；其次，在gridOptions定義中需要有getRowNodeId方法；最后，再根據id獲取需要更新的節點；以上三個步驟缺一不可const rowNodeByID = gridOptions.api.getRowNode("dd");//獲取id為dd的數據行//需要更新的數據const newRowById = {id: "dd",name: '更新的行',sex: '無性別',age: 10000000000};rowNodeByID.setData(newRowById); // 設置數據// #endregion /* 注意： 以上兩種方式跟getRowNode這個函數的入參類型有兩種（數字和字符串），對應著 getRowNodeId 函數的使用，一定不能搞反了。當為指定更新行數：getRowNode入參為數字型（具體第幾行），并且getRowNodeId方法一定不能寫（需要注釋掉），否則getRowNode獲取數字型參數就會失效，導致獲取不到對應行；當為根據id更新數據：getRowNode輸入的是字符串（具體id），那就一定需要 getRowNodeId 函數， 否則getRowNode獲取數字型參數也會失效 */}更新后的表格：
?
2.使用updateRowData方法（可以進行批量更新）
function byRowNode() {const selRow = gridOptions.api.getSelectedRows(); //獲取選中的行if (selRow.length <= 0) {alert("請選中一行數據");return;}for (var index = 0; index < selRow.length; index++) {selRow[index].name = '哈哈哈哈哈哈';selRow[index].sex = "不男不女"}gridOptions.api.updateRowData({update: selRow});}更新后的表格：
?
三 更新單元格的數據
? ? ? ? 使用setDataValue方法：
function updateCellData() {// "dd" 為數據中的id,根據id獲取需要更新的行var rowNode = gridOptions.api.getRowNode("ee");// age:需要修改的字段name; 12:應該設置的數據rowNode.setDataValue('age', "12");// 注意：getRowNode的用法和上面更新行數據中的用法一致，要區分入參是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><!-- <script src="https://unpkg.com/@ag-grid-community/all-modules@26.1.0/dist/ag-grid-community.min.js"> --><!-- </script> --></head><!-- 此頁面包含功能：重設表格數據--><body><input type="button" value="重設整個表格的數據" onclick="resetGrid()" /><input type="button" value="更新指定行數據" onclick="bySetRows()" /><input type="button" value="更新選中行的數據" onclick="byRowNode()" /><input type="button" value="更新某個單元格的內容" onclick="updateCellData()" /><div id="myGrid" style="width: 100%;height: 500px; ;margin-top: 10px;" class="ag-theme-alpine"></div><script>//定義表格列const columnDefs = [{headerName: '姓名',field: 'name','pinned': 'left',checkboxSelection: true,headerCheckboxSelection: true}, {headerName: '性別',field: 'sex'}, {headerName: '年齡', field: 'age'}];const data = [{ id: "aa", name: '小明', sex: '男', age: '100' },{ id: "bb", name: '小花', sex: '女', age: '5' },{ id: "cc", name: '小張', sex: '男', age: '100' },{ id: "dd", name: '小藍', sex: '女', age: '5' },{ id: "ee", name: '小華', sex: '男', age: '35' }];const gridOptions = {columnDefs: columnDefs,rowData: data,onGridReady: function () {gridOptions.api.sizeColumnsToFit();},getRowNodeId: function (data) {return data.id;},rowSelection: 'multiple'};/*************************************************1.重設整個表格的數據：setRowData**********************************/function resetGrid() {//新的數據項const Newdata = [{ id: "dd", name: '小d', sex: '女', age: '5' },{ id: "ee", name: '小m', sex: '男', age: '35' },{ id: "ff", name: '小h', sex: '男', age: '11' }];//調用接口重新設置數據gridOptions.api.setRowData(Newdata);}/**************************************************2.更新行的數據******************************************************/// ag-grid 官網地址：https://www.ag-grid.com/javascript-data-grid/data-update-single-row-cell/ //方法一 ：通過setData更新,首先獲取需要更新的節點function bySetRows() {// #region 指定更新第幾行的數據 // const rowNode = gridOptions.api.getRowNode(3);//獲取表格第3行數據節點// //需要更新的數據// const newRow = {// id: "dd",// name: '更新的行',// sex: '無性別',// age: 10000000000// };// rowNode.setData(newRow);// #endregion // --------------------------------------------------------------------------------------------------- // #region 根據列中的id更新數據 //步驟：首先在源數據中，需要有id這一列；其次，在gridOptions定義中需要有getRowNodeId方法；最后，再根據id獲取需要更新的節點；以上三個步驟缺一不可const rowNodeByID = gridOptions.api.getRowNode("dd");//獲取id為dd的數據行//需要更新的數據const newRowById = {id: "dd",name: '更新的行',sex: '無性別',age: 10000000000};rowNodeByID.setData(newRowById); // 設置數據// #endregion /* 注意： 以上兩種方式跟getRowNode這個函數的入參類型有兩種（數字和字符串），對應著 getRowNodeId 函數的使用，一定不能搞反了。當為指定更新行數：getRowNode入參為數字型（具體第幾行），并且getRowNodeId方法一定不能寫（需要注釋掉），否則getRowNode獲取數字型參數就會失效，導致獲取不到對應行；當為根據id更新數據：getRowNode輸入的是字符串（具體id），那就一定需要 getRowNodeId 函數， 否則getRowNode獲取數字型參數也會失效 */}//方法二：通過updateRowData更新 function byRowNode() {const selRow = gridOptions.api.getSelectedRows(); //獲取選中的行if (selRow.length <= 0) {alert("請選中一行數據");return;}for (var index = 0; index < selRow.length; index++) {selRow[index].name = '哈哈哈哈哈哈';selRow[index].sex = "不男不女"}gridOptions.api.updateRowData({update: selRow});}/**************************************************3.更新單元格的數據******************************************************/// ag-grid 官網地址：https://www.ag-grid.com/javascript-data-grid/data-update-single-row-cell/ // 更新某個單元格的內容，主要可以用于修改數據之后，不刷新頁面，就可以更新被修改的單元格。function updateCellData() {// "dd" 為數據中的id,根據id獲取需要更新的行var rowNode = gridOptions.api.getRowNode("ee");// age:需要修改的字段name; 12:應該設置的數據rowNode.setDataValue('age', "12");// 注意：getRowNode的用法和上面更新行數據中的用法一致，要區分入參是id還是行數。}//在dom加載完成后 初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {const eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的IDnew agGrid.Grid(eGridDiv, gridOptions);});</script> </body></html>總結
以上是生活随笔為你收集整理的ag-grid 表格数据更新的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下安装subversion1.
- 下一篇： 计网--TCP UDP