ag-grid配置
子組件代碼
<template>
<section>
<div>
<!-- <input type="text" placeholder="請輸入要搜索的內容" v-model="searchText"> -->
</div>
<ag-grid-vue
:bodyScroll="bodyScroll"
:cellMouseOver="cellMouseOver"
:rowDataChanged="rowDataChanged"
:editType="gridParameter.editType || 'fullRow'"
:suppressClickEdit="gridParameter.suppressClickEdit"
:suppressRowClickSelection="gridParameter.suppressRowClickSelection"
:suppressCellSelection="gridParameter.suppressCellSelection"
:class="gridParameter.themeName || 'ag-theme-balham'"
:headerHeight="gridParameter.headerHeight"
:floatingFilter="gridParameter.floatingFilter"
:style="gridParameter.style"
:columnDefs="gridParameter.columnDefs"
:rowData="gridParameter.rowData"
:rowHeight="gridParameter.rowHeight"
:rowSelection="gridParameter.rowSelection"
:defaultColDef="gridParameter.defaultColDef"
:gridOptions="gridOptions"
:cellClicked="onCellClicked"
:cellValueChanged="cellValueChanged"
:cellEditingStarted="cellEditingStarted"
:cellEditingStopped="cellEditingStopped"
:rowDoubleClicked="rowDoubleClicked"
:rowClicked="rowClicked"
:onGridReady="onGridReady"
:columnMoved="columnMoved"
:rowSelected="rowSelected"
:rowValueChanged="rowValueChanged"
:components="gridParameter.components"
@editClick="editClick"
:isRowSelectable="gridParameter.isRowSelectable"
:frameworkComponents="frameworkComponents"
></ag-grid-vue>
<pg v-if="showPaged"></pg>
<!-- <button @click="edit">edit</button>
<button @click="stopEdit">top edit</button>-->
</section>
</template>
<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { mapGetters } from "vuex";
import pg from "./Pagina/index";
import { getCookies } from "@/utils/auth";
// import demo from "./demo/index";
export default {
props: [
"gridParameter",
"searchText",
"getRowNodes",
"showPaged",
"roleGrid",
"peopleGrid",
"userRowClick",
"frameworkComponents",
"cellMouseOver1",
],
name: "App",
components: {
AgGridVue,
pg,
// GridEditButtons: demo,
},
computed: {
...mapGetters(["columnSaveState", "now_page"]),
},
data() {
return {
gridStyleKey: "",
gridApi: "",
columnApi: "",
selectdNodes: [],
gridOptions: {
// defaultColDef: {
// // allow every column to be aggregated
// enableValue: true,
// // allow every column to be grouped
// enableRowGroup: true,
// // allow every column to be pivoted
// enablePivot: true,
// editable: true // 開啟網格編輯功能
// },
// editable: false, // 開啟網格編輯功能
// rowSelection: 'multiple',
// treeData: true, // 樹數據結構
// editType: 'fullRow', // 開啟整行編輯
enableSorting: true, // 開啟排序功能
enableFilter: true, // 開啟過濾功能
enableColResize: true, // 開啟調整列寬
showToolPanel: false, // 展開功能面板
contractColumnSelection: true, // 默認不展開tree
toolPanelSuppressRowGroups: true,
toolPanelSuppressSideButtons: true, // 禁止選項面板功能
// toolPanelSuppressValues: false,
// toolPanelSuppressPivots: false,
toolPanelSuppressPivotMode: true,
// suppressClickEdit: true, // 禁用雙擊網格編輯
// toolPanelSuppressColumnFilter: true,
// toolPanelSuppressColumnSelectAll: true,
// toolPanelSuppressColumnExpandAll: true,
// pagination: true, // 開啟分頁器
// rowGroupPanelShow: 'always', // 表格頂部欄
// enableRowGroup: true,
// enablePivot: true,
// enableStatusBar: true, // 開啟狀態欄
// paginationPageSize: 500, // 分頁器每頁顯示的條數
// enableRangeSelection: true,// 開啟拖動選擇網格
// groupHeaders: true, // 使用組標題
rowDragManaged: true, // 設置行拖動 需要在表格其中一個列 設置rowDrag:true
animateRows: true, // 拖動動畫效果
// rowMultiSelectWithClick: true,
stopEditingWhenGridLosesFocus: true, // 在網格失去焦點時停止單元格編輯
// singleClickEdit: true,
localeText: {
// 國際化
// for filter panel
page: "當前頁",
more: "更多",
to: "至",
of: "總數",
next: "下一頁",
last: "上一頁",
first: "首頁",
previous: "上一頁",
loadingOoo: "加載中...",
// for set filter
selectAll: "全選",
searchOoo: "請輸入關鍵字...",
blanks: "空白",
// for number filter and text filter
filterOoo: "過濾...",
applyFilter: "daApplyFilter...",
// for number filter
equals: "相等",
notEqual: "不相等",
lessThan: "小于",
greaterThan: "大于",
lessThanOrEqual: "小于等于",
greaterThanOrEqual: "大于等于",
inRange: "范圍",
contains: "包含",
notContains: "不包含",
startsWith: "開始于",
endsWith: "結束于",
// the header of the default group column
group: "組",
// tool panel
columns: "列選項",
rowGroupColumns: "laPivot Cols",
rowGroupColumnsEmptyMessage: "拖拽組到這里",
valueColumns: "laValue Cols",
pivotMode: "樞軸模式",
groups: "laGroups",
values: "laValues",
pivots: "laPivots",
valueColumnsEmptyMessage: "la drag cols to aggregate",
pivotColumnsEmptyMessage: "la drag here to pivot",
// other
noRowsToShow: "無數據",
// enterprise menu
pinColumn: "固定列",
valueAggregation: "laValue Agg",
autosizeThiscolumn: "自動調整當前網格寬度",
autosizeAllColumns: "自動調整當前頁所有網格寬度",
groupBy: "排序",
ungroupBy: "不排序",
resetColumns: "恢復網格樣式",
expandAll: "展開全部",
collapseAll: "關閉",
toolPanel: "顯示/隱藏控制表盤",
export: "導出到...",
csvExport: "導出CSV",
excelExport: "導出Excel",
// enterprise menu pinning
pinLeft: "<<鎖定至表格左側",
pinRight: ">>鎖定至表格右側",
noPin: "<>取消鎖定",
// enterprise menu aggregation and status panel
sum: "總數",
min: "最小值",
max: "最大值",
none: "無",
count: "總",
average: "平均",
// standard menu
copy: "復制",
copyWithHeaders: "復制內容及標題",
ctrlC: "ctrl + C",
paste: "粘貼",
ctrlV: "ctrl + V",
},
},
};
},
watch: {
searchText(val) {
this.onFilterTextBoxChanged();
},
},
mounted() {
const corpCode = getCookies("corpCode");
const loginCode = getCookies("loginCode");
const now_page = this.now_page;
this.gridStyleKey = `${corpCode}_${loginCode}_${now_page}`;
},
methods: {
onGridReady(event) {
// 表格加載完成事件
this.gridApi = event.api;
this.columnApi = event.columnApi;
// event.api.sizeColumnsToFit()
// event.columnApi.autoSizeColumns()
if (!event.api.getModel()) {
// 所有列展示在當前表格頁面
const allColumnIds = event.columnApi.getAllColumns();
// event.api.sizeColumnsToFit()
this.$emit("onGridReady", event);
// this.gridApi.sizeColumnsToFit();
event.columnApi.autoSizeColumns(allColumnIds);
}
},
rowDataChanged(event) {
// event.api.sizeColumnsToFit()// 所有列展示在當前表格頁面
// const allColumnIds = event.columnApi.getAllColumns()
// var b =
// .forEach(function(column) {
// allColumnIds.push(column.colId)
// })
// event.columnApi.autoSizeColumns(allColumnIds)// 自動調整所有列寬
},
onCellClicked(event) {
// 每個格子的點擊事件
this.$store.dispatch("onCellClicked", event.value);
this.$store.commit("GET_CELL_EVENT", event);
this.$emit("cellClick", event);
this.$emit("onCellClicked", event);
if (sessionStorage.getItem("orderStatus") === "ddfcwc") {
this.gridOptions.suppressClickEdit = true;
} else {
this.gridOptions.suppressClickEdit = false;
}
},
cellValueChanged(event) {
// 網格內容更改事件
// this.$store.commit('GET_CELL_EVENT', event)
this.$emit("changedValue", event);
this.$emit("cellValueChanged", event);
},
rowDoubleClicked(event) {
this.$emit("rowDoubleClicked", event);
// 雙擊行 事件
//
this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
this.$store.commit("GET_DOUBLE_CLICKED_EVENT", event);
},
rowClicked(event) {
// 單擊行 事件
this.$emit("rowClicked", event);
this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
if (this.roleGrid) {
this.$store.commit("GRID_CLICK_ROW", event.data);
this.$emit("gridClick");
} else if (this.peopleGrid) {
return;
} else {
this.$store.commit("GRID_CLICK_ROW", event.data);
this.$emit("gridClick");
}
},
columnMoved(event) {
// 列移動事件
this.$emit("columnMoved", event);
},
saveState(value) {
if (value) {
// 保存表格樣式
const columnSendState = {
colState: this.gridOptions.columnApi.getColumnState(),
groupState: this.gridOptions.columnApi.getColumnGroupState(),
sortState: this.gridOptions.api.getSortModel(),
filterState: this.gridOptions.api.getFilterModel(),
};
// this.$store.dispatch('saveGridColumnState', columnSendState)
localStorage.setItem(
`${this.gridStyleKey}_${value}`,
JSON.stringify(columnSendState)
);
const saveGridStyle = {
url: "/tableStyle/save",
method: "post",
params: {
key: `${this.gridStyleKey}_${value}`,
value: JSON.stringify(columnSendState),
},
};
this.$store.dispatch("get_to_do_tasks", saveGridStyle).then((res) => {
// 待辦項目
//
if (res.success) {
this.$message({
type: "success",
message: "表格樣式保存成功",
});
}
});
}
},
reset(value) {
if (!value) {
return false;
}
// 恢復自定義表格樣式
var columnSaveState = JSON.parse(
localStorage.getItem(`${this.gridStyleKey}_${value}`)
);
if (columnSaveState) {
this.gridOptions.columnApi.setColumnState(columnSaveState.colState);
this.gridOptions.columnApi.setColumnGroupState(
columnSaveState.groupState
);
this.gridOptions.api.setSortModel(columnSaveState.sortState);
this.gridOptions.api.setFilterModel(columnSaveState.filterState);
} else {
const getGridStyle = {
url: "/tableStyle/get",
method: "post",
params: {
key: `${this.gridStyleKey}_${value}`,
},
};
this.$store.dispatch("get_to_do_tasks", getGridStyle).then((res) => {
// 待辦項目
if (res.data) {
columnSaveState = JSON.parse(res.data.value);
if (columnSaveState) {
this.gridOptions.columnApi.setColumnState(
columnSaveState.colState
);
this.gridOptions.columnApi.setColumnGroupState(
columnSaveState.groupState
);
this.gridOptions.api.setSortModel(columnSaveState.sortState);
this.gridOptions.api.setFilterModel(columnSaveState.filterState);
// this.saveState(value)
}
}
});
}
},
restore() {
// 恢復表格默認樣式
this.gridOptions.columnApi.resetColumnState();
this.gridOptions.columnApi.resetColumnGroupState();
this.gridOptions.api.setSortModel(null);
this.gridOptions.api.setFilterModel(null);
},
onFilterTextBoxChanged() {
//
this.gridOptions.api.setQuickFilter(this.searchText);
},
edit(index, key) {
// this.gridOptions.api.setRowData()
this.gridOptions.api.setFocusedCell(index, key); // 定位焦點
this.gridOptions.api.startEditingCell({
// 開始編輯加點行
rowIndex: index,
colKey: key,
});
},
stopEdit(event) {
this.gridOptions.api.stopEditing();
},
cellEditingStarted(event) {
// cell開始編輯
this.$emit("cellEditingStarted", event);
},
cellEditingStopped(event) {
// cell開始編輯
this.$emit("cellEditingStopped", event);
},
rowValueChanged(event) {
// 行內的值發生變化
this.$store.commit("ROW_VALUE_CHANGED_DATA", event.data);
this.$emit("childRowchanged", event);
this.$emit("rowValueChanged", event);
},
isFirstColumn(params) {
// var displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns()
// var thisIsFirstColumn = displayedColumns[0] === this.gridOptions.column
// return thisIsFirstColumn
},
addNewRow() {},
rowSelected(params) {
// row選擇事件回調
const selectdNodes = params.api.getSelectedNodes();
const id = this.$el.id;
selectdNodes.gridId = id;
this.selectdNodes = selectdNodes;
// console.log("selectdNodes");
// console.log(selectdNodes);
this.$store.commit("GRID_SELECT_ROW", selectdNodes);
this.$emit("rowSelected", params);
},
bodyScroll(event) {
this.$emit("bodyScroll", event);
// if (event.direction === 'horizontal' && event.left % 300 === 0) {
// event.columnApi.autoSizeColumns()
// var allColumnIds = []
// event.columnApi.getAllColumns().forEach(function(column) {
// allColumnIds.push(column.colId)
// })
// event.columnApi.autoSizeColumns(allColumnIds)// 自動調整所有列寬
// }
},
cellMouseOver(event) {
this.$emit("cellMouseOver1", event);
},
editClick(event) {
// console.log(123);
// console.log(event);
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
父組件調用
<ag-grid :gridParameter="gridParameter" :searchText="searchInput"></ag-grid>
import agGrid from "@/components/AgGrid/index.vue";
components: {
agGrid,
},
gridParameter: {
style: {
//表格樣式
height: "calc(100% - 165px)",
"100%",
},
columnDefs: [
//每列
{
headerName: "數據來源",
field: "sourceFrom",
120,
},
{
headerName: "公司名稱",
field: "companyname",
150,
},
{
headerName: "網點名",
field: "netsite",
100,
},
{
headerName: "車輛線路起點",
field: "bsite",
120,
},
{
headerName: "車輛線路終點",
field: "esite",
120,
},
{
headerName: "裝車時間",
field: "loadingTime",
100,
},
{
headerName: "實際發車時間",
field: "sendtime",
120,
},
{
headerName: "車牌號",
field: "carnumber",
100,
},
{
headerName: "掛車牌號",
field: "trailernumer",
100,
},
{
headerName: "司機手機號",
field: "drivertel",
100,
},
{
headerName: "裝車件數",
field: "orderCount",
100,
},
{
headerName: "總件數",
field: "qty",
100,
},
{
headerName: "重量",
field: "weight",
100,
},
{
headerName: "體積",
field: "vol",
100,
},
{
headerName: "運輸費合計",
field: "transfee",
100,
},
{
headerName: "批次狀態",
field: "batchState",
100,
},
{
headerName: "托運單號",
field: "billNo",
100,
},
{
headerName: "發車批次",
field: "batchNo",
100,
},
{
headerName: "網點地址（?。?,
field: "netProvince",
150,
},
{
headerName: "網點地址（市）",
field: "netCity",
150,
},
{
headerName: "網點地址（區）",
field: "netDistrict",
150,
},
{
headerName: "到達時間",
field: "arrivedTime",
100,
},
{
headerName: "實際運費",
field: "actualFreight",
100,
},
{
headerName: "單車毛利",
field: "profit",
100,
},
{
headerName: "現付運輸費",
field: "handTransitFee",
100,
},
{
headerName: "現付油卡費",
field: "handCardFee",
100,
},
{
headerName: "回車運輸費",
field: "retTransitFee",
100,
},
{
headerName: "整車信息費",
field: "vehicleInfoFee",
100,
},
{
headerName: "到付油卡費",
field: "payCardFee",
100,
},
{
headerName: "車輛核載",
field: "vehicleBorne",
100,
},
{
headerName: "原始單號",
field: "originalDocumentNumber",
100,
},
{
headerName: "統一社會信用代碼",
field: "socialCreditIdentifier",
150,
},
{
headerName: "許可證編號",
field: "permitNumber",
100,
},
{
headerName: "業務類型代碼",
field: "businesstypeCode",
120,
},
{
headerName: "發運實際日期",
field: "goodsReceiptdatetime",
120,
},
{
headerName: "發貨人",
field: "consignor",
100,
},
{
headerName: "發貨人個人證件號",
field: "rpersonalIdentity",
150,
},
{
headerName: "發貨方-國家行政區劃代碼",
field: "rcountrySubdivisioncode",
180,
},
{
headerName: "收貨人",
field: "consignee",
100,
},
{
headerName: "收貨方-國家行政區劃代碼",
field: "ecountrySubdivisioncode",
180,
},
{
headerName: "牌照類型代碼",
field: "licenseplatetypecode",
120,
},
{
headerName: "車輛分類代碼",
field: "vehicleClassificationCode",
120,
},
{
headerName: "道路運輸證號",
field: "roadtranscertnumber",
120,
},
{
headerName: "所有人",
field: "owner",
100,
},
{
headerName: "姓名",
field: "nameofperson",
100,
},
{
headerName: "從業資格證號",
field: "quaCertNumber",
100,
},
{
headerName: "貨物名稱",
field: "descriptionofgoods",
100,
},
{
headerName: "貨物類型分類代碼",
field: "cargotypeClassCode",
150,
},
],
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.roleCode != "sysAdmin" : false;
},
defaultColDef: {
singleClickEdit: true,
editable: false, // 開啟網格編輯功能
headerCheckboxSelection: function (params) {
var displayedColumns = params.columnApi.getAllDisplayedColumns();
var thisIsFirstColumn = displayedColumns[0] === params.column;
return thisIsFirstColumn;
},
checkboxSelection: function (params) {
var displayedColumns = params.columnApi.getAllDisplayedColumns();
var thisIsFirstColumn = displayedColumns[0] === params.column;
return thisIsFirstColumn;
},
},
// 后端數據
rowData: [],
},
備注:
gridOption:表格配置
columnDefs:表格列設置
rowData:表格數據
總結
- 上一篇： redis投票计数
- 下一篇： 海康威视频监控设备Web查看系统（一）：