介绍

webkf-core-base-grid 基本表格组件，基础开发框架为Vue2.X

安装教程

# 指定npm服务器
npm set registry http://www.xhzq.com:4873
# 安装依赖包
npm i webkf-core-base-grid -S
# 查看更新版本
npm view webkf-core-base-grid versions
# 更新到指定版本
npm install [email protected]

更新日志

• 1.1.0 增加表格配置参数
• 1.0.7 增加行样式
• 1.0.6 增加单元格，过滤器使用
• 1.0.5 增加单元格样式
• 1.0.4 新增树形表格
• 1.0.0 表格组件测试版

增加表格配置参数

      表格配置参数可以和表格属性混用
      表格配置参数不包括 'rowData' 属性
      如果表格配置参数属性与表格属性相同时表格配置属性生效

      :allowGridConfig="true"   //是否启用表格配置参数
      :gridConfig="gridConfig"  //表格配置参数

      DEMO
       this.gridConfig = {
            'showToolbar': true,
            'defaultColDef': this.defaultColDef,
            'columnDefs': this.columnDefs,
            'rowSelection': this.rowSelection,
            'frameworkComponents': this.frameworkComponents,
            'treeData': true,
            'getDataPath': this.getDataPath,
            'animateRows': true,
            'autoGroupColumnDef': this.autoGroupColumnDef,
            'gridOptions': this.gridOptions
          }

增加行样式

#表格绑定数据
 :rowClassRules="rowClassRules"

#在beforeMount中增加行class回调
this.rowClassRules = {
      'test1': params => {
        var numSickDays = params.data.gold
        return numSickDays > 2 && numSickDays <= 5
      },
      'test2': 'data.gold > 5'
    }

# css
<style>
  .ag-theme-balham .test1 {
    background-color: sandybrown !important;
  }
  .ag-theme-balham .test2 {
    background-color: lightcoral !important;
  }
</style>

增加单元格样式

 # 先定义好过滤器方法（可以自己手写方法，可以调用全局的，可以把过滤器通过Vue实例出来）
  const DateFormat = baseGrid.Format.DateFormat
  const toThousands = baseGrid.Format.toThousands
 # 列配置中使用
 # 时间格式化 默认格式(yyyy-MM-dd hh:mm:ss)
   {
     headerName: 'Country',
     field: 'country',
     width: 120,
     valueGetter: (params) => {
       return DateFormat(params.data.country)
     }
   },
  # 千分符
   {
     headerName: 'Year',
     field: 'year',
     width: 90,
     valueGetter: (params) => {
       return toThousands(params.data.year)
     }
   },

增加单元格样式

   {
     headerName: 'Athlete',
     field: 'athlete',
     width: 150,
     cellStyle: {color: 'red'}
   },

新增树形表格

      :treeData=true
      :getDataPath="getDataPath"

      rowData: [
        {
          id: 'A',
          parentId: null,
          make: 'Toyota1',
          model: 'Celica',
          price: 35000,
          date: new Date().Format('yyyy-MM-dd hh:mm:ss')
        },
        {
          id: 'B',
          parentId: 'A',
          make: 'Ford',
          model: 'Mondeo',
          price: 32000,
          date: new Date().Format('yyyy-MM-dd hh:mm:ss')
        },
        {
          id: 'C',
          parentId: 'B',
          make: 'Porsche',
          model: 'Boxter',
          price: 72000,
          date: new Date().Format('yyyy-MM-dd hh:mm:ss')
        }
      ],

  beforeMount () {
    this.rowData.toTree('id', 'parentId', 'dataPath')
    this.getDataPath = data => {
      return data.dataPath
    }
  }

import 'webkf-core-base-grid/src/utils/prototype.js'

表格组件测试版

1. 属性

| 参数 | 说明 | 类型 |可选值 | 默认值 | | :---- | :---- | :---- |:---- | :---- | | showGrid | 是否显示表格 | Boolean | - | true | | showQuickFilter | 是否显示快速过滤 | Boolean | - | true | | baseGridDebug | 表格调试模式 | Boolean | - | true | | showToolbar | 是否显示工具栏 | Boolean | - | false | | groupUseEntireRow | 使用整行分组 | Boolean | - | false | | rowGroupPanelShow | 显示分组面板 | String | always/ | - | | suppressMakeColumnVisibleAfterUnGroup | 未知 | Boolean | - | false | | columnDefs | 列定义 | Array | - | - | | rowData | 行数据 | Array | - | - | | rowSelection | 行选择模式 | String | single/multiple | single | | sideBar | 右侧控制面板 | Boolean | - | false | | defaultColDef | 列默认设置 | Object | - | { sortable: true, // 是否允许排序  resizable: true, // 是否允许调整大小 filter: true, // 是否允许过滤  editable: true // 是否允许编辑} | | rowBuffer | - | - | - | - | | rowModelType | - | String | clientSide/infinite/viewport/serverSide | clientSide | | pagination | 是否分页 | Boolean | - | false | | paginationPageSize | 分页页面大小 | - | - | - | | cacheOverflowSize | - | - | - | - | | maxConcurrentDatasourceRequests | - | - | - | - | | infiniteInitialRowCount | - | - | - | - | | maxBlocksInCache | - | - | - | - | | autoGroupColumnDef | 自动分组列定义 | Object | - | - | | groupDefaultExpanded | 分组默认展开 | Number | - | - |

2. 事件

| 方法名 | 说明 | :---- | :---- | gridReady | 表格准备就绪 | ready | 准备就绪 | rowclick | 行点击 | rowDoubleClicked | 行双击 | rowSelected | 行选择 | selectionChanged | 行选择改变 | cellValueChanged | 单元格值改变 | cellClicked | 单元格点击 | cellDoubleClicked | 单元格双击 | cellContextMenu | 单元格右键菜单 | cellFocused | 单元格获取焦点 | modelUpdated | model更新 | cellEditingStarted | 单元格开始编辑 | cellEditingStopped | 单元格停止编辑 | rowEditingStarted | 行开始编辑 | rowEditingStopped | 行停止编辑 | rowDragEnter | 行拖住进入 | rowDragEnd | 行拖住结束 | rowDragMove | 行拖住移动 | rowDragLeave | 行拖住离开

3. 方法

| 方法名 | 说明 | 返回类型 |参数 | 默认值 | | :---- | :---- | :---- |:---- | :---- | | getSelectedDatas | 获取所有选择的数据 | Array | - | - | | getSelectedNodes | 获取所有选择的节点 | Array | - | - | | setAllColumnsWidth | 设置全列宽 | Void | - | - |

// 组件使用
  this.frameworkComponents = {  // wl: 表格框架组件
    'cellKeyValue': baseGrid.cellKeyValue,
    'cellSwitch': cellSwitch
  }
  
  // 渲染部门名称   
  Deptapi.GetAllList().then(res => {
        this.DeptIdList = res.toTree('deptId', 'parentId', 'path') // wl: 转换树形数据
        const deptCol = this.gridOptions.columnApi.getColumn('defaultDeptId');  //得到列
        // 设置单元格渲染
        deptCol.colDef.cellRenderer = 'cellKeyValue'
        deptCol.colDef.cellRendererParams = {
              list: this.DeptIdList,
              id: 'deptId',
              name: 'deptName',
        }
        this.gridOptions.columnApi.resetColumnState()
      })