当前位置：首页 > news >正文

angular 实现可编辑可选择复制的表格

news 2025/5/20 20:00:41

这个实现的核心就是ag-grid

当然有类似的库就不必多说，React, Vue和纯h5类似。简单贴一下代码

1.首先是h5部分，就一个id为supply-chain-material-grid-table的div，记住要设置高度

    <div class="dki-supply-chain-page-body"><div class="dki-supply-chain-page-material-table"><div class="table-operations"><button nz-button (click)="addRow()"><i nz-icon type="plus"></i> 新增</button><button nz-button (click)="deleteSelected()" nzDanger><i nz-icon type="delete"></i> 删除</button><button nz-button nzType="primary" (click)="save()"><i nz-icon type="save"></i> 保存</button></div><!-- set height! set height! set height!--><div id="supply-chain-material-grid-table" class="ag-theme-balham"></div></div></div>

2.样式部分(scss):

    .dki-supply-chain-page-material-table {width: 70%;height: 300px;.table-operations {margin-bottom: 16px;button {margin-right: 8px;}}#supply-chain-material-grid-table {height: 100%;}}

3.最重要的ts部分:

export class SupplyChainComponent implements OnInit {agGridMaterialApi = nullgridMaterialOptions = null;rowData = [{ id: 78, name: '张三', age: 28, address: '北京市朝阳区' },{ id: 77, name: '李四', age: 32, address: '上海市浦东新区' },{ id: 98, name: '王五', age: 25, address: '广州市天河区' }];ngOnInit(): void {this.getMaterialDataAndShowTable();}getMaterialDataAndShowTable() {this.showMaterialDataTable();}showMaterialDataTable() {const materialTableDiv = document.querySelector('#supply-chain-material-grid-table');const columnDefs = [{headerName: '',  // 空标题field: 'selected',width: 100,checkboxSelection: true,       // 显示复选框headerCheckboxSelection: true, // 显示全选复选框filter: false,                 // 禁用过滤editable: false,              // 不可编辑sortable: false               // 不可排序},{headerName: '姓名',field: 'name',editable: true,suppressMenu: true,filter: false,},{headerName: '年龄',field: 'age',editable: true,type: 'numericColumn',suppressMenu: true,width: 100,filter: false,},{headerName: '地址',field: 'address',editable: true,filter: false,suppressMenu: true,flex: 1  // 自动填充剩余空间}];const defaultColDef = {width: 100,minWidth: 100,menuTabs: [],resizable: true,sortable: false,lockPosition: true,};if (!this.agGridMaterialApi) {this.gridMaterialOptions = {rowHeight: 35,rowSelection: 'multiple',rowMultiSelectWithClick: false,suppressRowClickSelection: true,  // suppress singlerow selection when click enableRangeSelection: true,columnDefs,defaultColDef,rowData: this.rowData}this.agGridMaterialApi = agGrid.createGrid(materialTableDiv, this.gridMaterialOptions);}}deleteSelected() {const selectedNodes = this.agGridMaterialApi.getSelectedNodes();const selectedData = selectedNodes.map(node => node.data);const removeIdsArr = selectedNodes.map(item =>item.data ? item.data.id : -1);this.agGridMaterialApi.applyTransaction({ remove: selectedData });console.log('removeIdsArr:', removeIdsArr)const deletedRowData = this.rowData.filter(item => !removeIdsArr.includes(item.id));this.rowData = deletedRowData;console.log('After delete:', this.rowData);}addRow() {const newEmptyRow = {id: 92,name: '',age: null,address: ''};// this.rowData = rowDataCopy;if (this.agGridMaterialApi) {// this.agGridMaterialApi.setRowData(rowDataCopy);this.agGridMaterialApi.applyTransaction({ add: [newEmptyRow], addIndex: 0 });}}}

效果图：