webkf-core-base-grid v2.2.6

介绍

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 webkf-core-base-grid@X.X.X

更新日志

• 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. 属性

2. 事件

3. 方法

// 组件使用
  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()
      })