Ag-grid属性整理

import ClickableStatusBarComponent from './component/clickableStatusBarComponent';
// import HaearCustomComponent from './component/HaearCustomComponent'

const defaultColDef = {
  width:300, // 宽度
  editable: true, // 是否可编辑
  suppressMenu: false, // 显示
  cellStyle:{color:"#000",backgroundColor:"fff"}, // √
  hide:false, // √
  sortable: true,
  resizable: true,
  filter: true,
  menuTabs: ['filterMenuTab','generalMenuTab'], // 有效值为:'filterMenuTab','generalMenuTab'和'columnsMenuTab' TODO filterMenuTab无效
  // headerComponentParams: { menuIcon: "fa-bars" },
  // columnGroupShow:false, // 是否在组打开/关闭时显示列
  // toolPanelClass:[],
  // suppressToolPanel:false,
  // checkboxSelection:false,
  // rowDrag:false,
  // suppressResize:false,
  // suppressAggFuncInHeader:true,
};
const localeText={
  page: "页",
  more: "更多",
  to: "到",
  of: "of",
  next: "下一页",
  last: "上一页",
  first: "首页",
  previous: "上一页",
  loadingOoo: "加载中...",
  selectAll: "查询全部",
  searchOoo: "查询...",
  blanks: "空白",
  filterOoo: "过滤...",
  applyFilter: "daApplyFilter...",
  equals: "相等",
  notEqual: "不相等",
  lessThan: "小于",
  greaterThan: "大于",
  lessThanOrEqual: "小于等于",
  greaterThanOrEqual: "大于等于",
  inRange: "范围",
  contains: "包含",
  notContains: "不包含",
  startsWith: "开始于",
  endsWith: "结束于",
  group: "组",
  columns: "列",
  filters: "筛选",
  rowGroupColumns: "laPivot Cols",
  rowGroupColumnsEmptyMessage: "la drag cols to group",
  valueColumns: "laValue Cols",
  pivotMode: "laPivot-Mode",
  groups: "laGroups",
  values: "值",
  pivots: "laPivots",
  valueColumnsEmptyMessage: "la drag cols to aggregate",
  pivotColumnsEmptyMessage: "la drag here to pivot",
  toolPanelButton: "la tool panel",
  noRowsToShow: "数据为空",
  pinColumn: "laPin Column",
  valueAggregation: "laValue Agg",
  autosizeThiscolumn: "laAutosize Diz",
  autosizeAllColumns: "laAutsoie em All",
  groupBy: "排序",
  ungroupBy: "不排序",
  resetColumns: "重置列",
  expandAll: "展开全部",
  collapseAll: "关闭",
  toolPanel: "工具面板",
  export: "导出",
  csvExport: "导出为CSV格式文件",
  excelExport: "导出到Excel",
  pinLeft: "laPin <<",
  pinRight: "laPin >>",
  noPin: "laDontPin <>",
  sum: "总数",
  min: "最小值",
  max: "最大值",
  none: "无",
  count: "总",
  average: "平均值",
  copy: "复制",
  copyWithHeaders: "携带表头复制",
  ctrlC: "ctrl + C",
  paste: "粘贴",
  ctrlV: "ctrl + V"
};
const defaultProps = {
  // defaultColGroupDef={} // 默认列组定义
  enableColResize: true, // 允许拖动修改列宽
  suppressAutoSize: true, // 列的自动调整
  // suppressMovableColumns // 禁止列拖动移动,固定列的位置
  // suppressFieldDontNotation // 如果为true,则address.firstline字段名称中的点(例如)不被视为深引用。如果您愿意,可以在字段名称中使用点。
  // unSortIcon // todo 设置为true以显示“无排序”图标
  suppressMenuHide: true, //  设置为true以始终显示列菜单按钮,而不是仅在鼠标位于列标题上时显示。
  // autoGroupColumnDef // todo 如果您对默认值不满意,则允许指定组“自动列”。如果分组,则此列def包含在网格中的第一列定义中。如果不进行分组,则不包括此列。
  // suppressSetColumnStateEvents // todo 设置为true以禁止在调用columnApi.setColumnState(state)和 columnApi.resetColumnState()调用时引发的列事件。
  // quickFilterText // 使用此文本过滤行作为快速过滤器。

  enableSorting: true, // 允许排序
  // enableFilter: true, // 允许筛选 加上报错 不知道是不是版权的原因
  // showToolPanel
  // rowSelection: 'multiple', // 支持多选multiple  支持shift连续多选和ctrl不连续多选
  // rowMultiSelectWithClick // 允许单击选择多行
  // suppressRowClickSelection // 如果为true, 则单击行时不会发生行选择。当您想要专门选择复选框时使用。
  // suppressCellSelection // 如果为true,则不能选择单元格。这意味着当您单击它们时,单元格不会获得键盘焦点。
  // enableRangeSelection // 设置为true以启用范围选择。
  // rowDragManaged: true, // 设置为true以启用托管行拖动。启动分页、排序、过滤之后无效
  // suppressRowDrag // 设置为true以禁止行拖动。
  // singleClickEdit // 设置为true以启用单元格的单击编辑,只需单击即可开始编辑。
  // suppressClickEdit // 设置为true,以便单击或双击都不会开始编辑。请参阅单击,双击,无单击编辑
  // enableGroupEdit // 设置为true以启用组编辑,否则默认情况下无法编辑行组。
  // editType='fullRow' // 设置为“fullRow”以启用“ 完整行编辑”。否则留空以一次编辑一个单元格。
  enableCellChangeFlash: true, // 设置为true以使数据更改后单元格闪烁。请参阅闪烁数据更改。
  stopEditingWhenGridLosesFocus: true, // 将此设置为true可 在网格失去焦点时停止单元格编辑。默认情况下,网格会一直编辑,直到焦点转到另一个单元格。仅适用于内联(非弹出)编辑器。
  // enterMovesDown enterMovesDownAfterEdit // 将两个属性都设置为true以使Enter键具有Excel样式行为,即输入键向下移动。
  // headerHeight // 包含列标签标题的行的高度。如果未指定,则默认值为25px。请参阅标题高度示例。
  // groupHeaderHeight // 包含标题列组的行的高度。如果未指定,则使用headerHeight。请参阅标题高度示例。
  // floatingFiltersHeight //包含浮动过滤器的行的高度。如果未指定,则默认值为20px。请参阅标题高度示例。
  // pivotHeaderHeight // 在枢轴模式下包含列的行的高度。如果未指定,则使用headerHeight。请参阅标题高度示例。
  // pivotGroupHeaderHeight // 处于透视模式时包含标题列组的行的高度。如果未指定,则使用groupHeaderHeight。请参阅标题高度示例。
  // 行分组和透视
  // 数据和行模型
  // 滚动
  // 分页
  pagination: false, //  分页已启用。
  // paginationPageSize ,// 数。每页加载多少行。默认值= 100.如果paginationAutoPageSize 指定,则忽略此属性。请参阅自定义分页示例。
  paginationAutoPageSize: true, // True - 每页加载的行数由ag-Grid自动调整,因此每个页面显示足够的行以填充为网格指定的区域。
  // suppressPaginationPanel // True - 开箱即用的ag-Grid导航控件是隐藏的。如果pagination=true您想要提供自己的分页控件,这将非常有用 。 False(默认) - 当pagination=true它自动在底部显示必要的控件,以便用户可以浏览不同的页面。请参见示例自定义分页控件。
  /* 行块加载:无限和企业行模型 */
  /* 行模型:视口 */
  /* 全宽渲染器 */
  /* 大师细节 */
  /* 渲染和造型 */
  // rowHeight的	// 默认行高度(以像素为单位)。默认值为25像素。
  animateRows: true, // 设置为true以启用行动画。
  // rowStyle	给出特定行的样式。请参见行样式。
  // rowClass	给出特定行的类。请参阅行类。
  // rowClassRules	可以应用于包含某些CSS类的规则。请参阅行类规则。
  // excelStyles	导出到Excel时要使用的Excel样式列表
  // scrollbarwidth  设定	告诉网格滚动条在网格宽度计算的计算中使用的宽度。仅在使用非标准浏览器提供的滚动条时设置,因此网格可以在其计算中使用非标准大小。
  // suppressRowHoverHighlight	设置为true以通过添加ag-row-hoverCSS类不突出显示行。
  /* 国际化 */
  // localeText,localeTextFunc	您可以通过提供a localeText或a 来更改分页面板和默认过滤器中的文本localeTextFunc(请参阅下文)。见国际化。
  localeText,
  /* 叠加层 loadding */
  overlayLoadingTemplate: '<span class="ag-overlay-loading-center">数据加载中...</span>' ,
  overlayNoRowsTemplate:  "<span style=\"padding: 10px; border: 1px solid #999999; background: lightgoldenrodyellow;\">数据为空</span>",
  /* 其他 */
  defaultExportParams: true, // 用于导出到csv或 excel的默认配置对象
  enableCellExpressions: true, // 设置为true以允许单元格表达式。
  // ensureDomOrder	// 如果为true,则dom中行和列的顺序与屏幕上的顺序一致。请参阅辅助功能 - 行和列顺序。
  suppressDragLeaveHidesColumns: true,  // 如果为true,则将列拖出网格(例如,拖到组区域)时,不会隐藏该列。
  // suppressCopyRowsToClipboard	// 设置为true以仅具有范围选择,而不是行选择,复制到 剪贴板。
  // clipboardDeliminator	// 指定在复制到剪贴板时使用的分隔符
  suppressFocusAfterRefresh: true,	// 设置为true以在刷新后不将焦点设置回网格。这可以避免您希望将注意力集中在浏览器的另一部分上的问题。
  // suppressTabbing // 设置为true以删除网格标签功能。如果要以不同于网格提供的方式管理选项卡,请使用此选项。
  // suppressContextMenu // 设置为true表示不显示上下文菜单。如果您不想使用默认的“右键单击”上下文菜单,请使用此选项。
  allowContextMenuWithControlKey:true, // 允许上下文菜单显示,即使在Ctrl键被按下。
  /* 底部添加状态栏 */
  statusBar: {
    statusPanels: [
      { statusPanel: "statusBarComponent" },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"]
        }
      }
    ]
  },
  // 自定义组件
  frameworkComponents : {
    statusBarComponent: ClickableStatusBarComponent, // 状态栏
    // agColumnHeader: HaearCustomComponent
  },
};
ag-Grid Vue 是一个用于构建灵活的、高性能的数据表格和数据网格的 Vue 组件库。它是与 Vue 框架集成的 ag-Grid 社区版。使用 ag-Grid Vue,您可以轻松地在 Vue 应用程序中创建功能丰富的数据表格和网格,并利用 ag-Grid 提供的丰富功能和性能优势。 要在 Vue 应用程序中使用 ag-Grid Vue,您需要先安装 ag-Grid Vue 包。您可以使用 npm 或 yarn 进行安装: ```bash npm install --save ag-grid-vue # 或 yarn add ag-grid-vue ``` 安装完成后,您可以在 Vue 组件中引入并使用 ag-Grid Vue: ```vue <template> <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" class="ag-theme-alpine" ></ag-grid-vue> </template> <script> import { AgGridVue } from 'ag-grid-vue'; export default { components: { AgGridVue, }, data() { return { columnDefs: [...], // 定义 rowData: [...], // 行数据 }; }, }; </script> <style> @import '~ag-grid-community/dist/styles/ag-grid.css'; @import '~ag-grid-community/dist/styles/ag-theme-alpine.css'; </style> ``` 在上面的示例中,您可以通过传递定义(columnDefs)和行数据(rowData)来配置 ag-Grid Vue 组件。您还需要为 ag-Grid 使用的主题样式添加对应的 CSS。 只是一个简单的示例,您可以根据您的需求和数据结构进行更多的配置和自定义。您可以参考 ag-Grid Vue 的官方文档以获取更多详细信息和示例代码。希望这可以帮助您开始使用 ag-Grid Vue!如果有任何其他问题,请随时提问。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值