@beisen/DataGrid

DataGrid

非talentUI项目使用该组件请点击

##Features

renders huge amounts of data

resizable columns

reorderable columns

remote data support

custom row/cell/column rendering

multiple/single selection

sorting

filtering

hideable columns

参数

dataSource: Array/String/Function/Promise //数据列表要渲染的数据，本地数据需传入多个对象构成的数组，远程数据可传入URL或返回promise的函数

idProperty: String（必填）//是一个列名，用来标识每行数据的唯一性

columns: Array（必填） //DataGrid的列名

virtualRendering: Boolean //数据截断的参数，默认为true,为true时，进行数据截断，界限值为26，即传入10条时显示10条，传入40条时，显示26条

更多参数介绍请参考：https://github.com/zippyui/react-datagrid

Basic使用方法

1.安装npm组件包

npm install @beisen/DataGrid --save-dev

2.引用组件

import DataGrid from "@beisen/DataGrid"

3.传入参数

const data = [
  { id: 0, index: 1, firstName: 'John', city: 'London', email: '[e-mail]', 'bgColor': '#f28d48'},
  { id: 1, index: 2, firstName: 'John', city: 'London', email: '[e-mail]','bgColor': '#40afd8' }
];

const columns = [
  { name: 'index', title: '#', width: 50 },
  { name: 'firstName' },
  { name: 'lastName'  },
  { name: 'city' },
  { name: 'email' }
]

var App = React.createClass({
  render: function(){
    return <DataGrid
      idProperty='id'
      hidden="false"
      dataSource={data}
      columns={columns}
      style={{height: 500}}
    />
  }
})

render(<App />, document.getElementById('content'))

更多demo示例请参考：http://zippyui.com/react-datagrid/#/examples/basic

2016.12.6 更新日志：

1 增加对于表格背景色的支持

2016.11.22 （tag0.1.48）更新日志：

1.新增自定义行背景色,data数组中可传入bgColor，参考上面传入参数　(bgColor并非必要字段)

2.修复出现多个空提示的bug

###＃ 2016-11-22 （tag0.1.47）更新：

新增大名片和行编辑相关内容:

参数网址

2016.11.11更新日志：

1.添加左右固定列功能，数据变化：在原columns的数据中，增加"fixed"字段，通过传入"left"或"right"值，实现该列的左右固定。无"fixed"字段时，默认为非固定列数据

2.添加固定列阴影

3.更改表头宽度显示规则，所有宽度均依据表头字数计算得来，保证所有表头的文字在第一次打开时可以完整显示。单个半角字符宽度可由外部通过"singleWordWidth"控制

4.更改存储宽度的localStorage的名称，避免之前记录的宽度值对现在表格的显示造成影响

5.修正因为固定列造成的hover效果不一致的问题

注意：

1.必须在外部传入外层可视区div的宽度，不传时将影响宽度的计算，最终影响表格的显示。

2.必须添加resize事件，以获得最新的外部可视区div的宽度。否则影响表格的显示

上述两种的方法可参照根目录下的index.js中的写法

2016.11.15更新日志：

1.完善左右固定列功能。数据变化：新增"fixed"字段接收值，实现左固定列的字段值可以是：'left', true, ''(空字符串)，实现右固定列的字段值依然为'right'，无"fixed"字段或字段值为 false 时，为非固定列数据

2.增加纵向滚动条

3.支持从外面传入高度，但由于第三方库的设计是会保证行的完整显示，因此传入的高度与最终看到的结果可能存在偏差

2016.11.21更新日志：

1.新增两个字段：outHeight(外部传入给数据列表的高度)，rowType(列表内容的类型，改字段有"small","medium","big"三个值，分别对应50px,70px,100px高度的数据行的高度，传入其他值或不传时，默认为40px行高)

2.更改外部传入高度的方式，改为从outHeight字段传入；修正外部传入高度时显示存在偏差的问题。

3.修正滚动时hover显示效果不佳的问题

4.依据设计要求，将原来滚动时阴影效果变成border

5.个别样式的微调

注意：

1.传入参数时virtualRendering={false}须保留，否则固定表头无法正确显示