npm install k2-ag-grid-addonsReact Component Boilerplate
===========================
#1.组件
###ControllBtn，DateFormat， PageNumChange， SearchFilter， TagCellRender， TipTemplate， TopPageChange, CopyOrClick, TableResize, EditCell, StopEdit, PaginationInput（待续...）
一般配合ControllBtn使用
eg:在ControllBtn参数data
const data = [
{innerHTML: '修改', href: 'javascript:;', onclick: (function (params) {
const currentVal = EditCell(params, 'projName')
console.log(currentVal)
}).bind(this)},
{innerHTML: '取消', href: 'javascript:;', onclick: function (params) {
StopEdit(params, 'projName', 'test')
}}
EditCell 第二个参数代表要修改的列的field值，点击修改按钮则修改了按钮所在行的projName列对应的cell，且EditCell返回当前修改的cell的内容
StopEdit 停止修改，第二个参数和EditCell的第二个参赛意义一样，第三个参数可传可不传，如传，表示停止编辑后，当前的cell显示的内容
###ControllBtn:
使用方法：
import { ControllBtn } from 'ag-grid-addons'
在columnDefs中cellRender： function (params) {
return ControllBtn(params, data)
}
eg: data = [
{innerHTML: 'test1', href: 'javascript:;', onclick: function () { console.log(1111) }},
{innerHTML: 'test2', href: 'javascript:;', onclick: function () { console.log(222) }}
]
btn的载体为a标签，所以其中定义的属性为a标签的属性
###DateFormat:
使用方法：
``javascript`
import { DateFormat } from 'ag-grid-addons'
在columnDefs中cellRender： DateFormat（待优化）
依赖moment.js
###PageNumChange:
使用方法：
import { PageNumChange } from 'ag-grid-addons'
此为改变ag-grid表格的显示条数的组件
eg:
pagesize为一个数组，数组的第一元素为默认选择
onChange回调，获取的为当前选择的value
###SearchFilter:
使用方法：
import { SearchFilter } from 'ag-grid-addons'
在columnDefs中filter： SearchFilter
为k2自定义的搜索组件，目前不支持后台过滤（后期添加）
###TagCellRender:
使用方法：
import { TagCellRender } from 'ag-grid-addons'
在columnDefs中cellRender： function (params) {
return TagCellRender(params, callback)
}
eg: callback = (value) => {
console.log(value)
}
注意： 须在表格中展示的数据，即params.value为数组，
可将其元素展示为标签，并支持Ctrl + click选中，并返回一个选中标签的内容的
数组，支持翻页后返回仍被选中的状态。
###TipTemplate:
使用方法：
import { TipTemplate } from 'ag-grid-addons'
在columnDefs中cellRender： function (params) {
return TipTemplate(params, callback)
}
eg: callback = (params) => {
let tips = {}
if ((params.rowIndex % 2) === 0) {
tips.type = 'success'
} else if ((params.rowIndex % 3) === 0){
tips.type = 'warning'
} else if ((params.rowIndex % 5) === 0){
tips.type = 'error'
} else {
tips.type = 'fail'
}
tips.message = params.value
tips.value = params.value
return tips
}
注意：设置提示信息和提示类型 必须return一个数据， 数据格式{type:'success|fail|error|waring|info', message: 'sss', value: 'test'}
###CopyOrClick:
使用方法：
import { CopyOrClick } from 'ag-grid-addons'
在所用组件中的constructor () {
super()
this.CopyOrClick = CopyOrClick.bind(this)
}
eg: onGridReady (params) {
this.api = params.api
this.columnApi = params.columnApi
this.CopyOrClick(this.rowClick)
}
作用：用于ag-grid行单击发生跳转所用，单击跳转，滑动复制表格内容时不执行click
###TableResize:
使用方法：
import { TableResize } from 'ag-grid-addons'
在所用组件中的constructor () {
super()
this.TableResize = TableResize.bind(this)
}
eg: onGridReady (params) {
this.api = params.api
this.columnApi = params.columnApi
this.TableResize()
}
作用：用于ag-grid在改变浏览器大小时自适应，前提条件是ag-grid的gridOption设置enableColResize=true,且columnDefs中的不是所有列都包含suppressSizeToFit：true，
如果需要在ag-grid加载时就进行自适应，请在gridOption中设置
onModelUpdated: () => {
if (this.api) {
this.api.sizeColumnsToFit()
}
}
###PaginationInput:
介绍：介于ag-grid更新太快，且分页区功能不太适合项目，所以单独独立出一个分页功能
使用方法：
import { PaginationInput } from 'ag-grid-addons'
。。。。
具体使用方法请参考项目example中的app
###(未完，待续....)
Minimal React component boilerplate with Babel 6, Webpack, hot module replacement via babel-plugin-react-transform, Flow, tests with Tape and eslint-friendly.
Inspired by Dan Abramov's library boilerplate
$ npm install
$ npm run dev
navigate to localhost:8080
You might want to tune .babelrc and webpack.config based on your needs.
- Why not to use npm scripts over webpack CLI to run a dev server? — that's why
- Why so fancy import works import Component from Component`? — checkout the aliases in webpack config.
Feedback appreciated!