data-grid

##此文档为表格参数说明文档

• dataSource={data}
• columns={columns}
• scrollTop={0}
• sortInfo={SORT_INFO}
• loadDefault={false}
• customLoading={loading}
• onSortChange={this.handleSortChange}
• onColumnResize={this.onColumnResize}
• onColumnOrderChange={this.handleColumnOrderChange}
• emptyText={}
• singleWordWidth={this.state.singleWordWidth}
• outerWidth={this.state.outerWidth}
• virtualRendering={false} //须保留
• style={{}}
• outHeight={300} //详见readme中“2016.11.21更新日志”
• rowType={"small"} //详见readme中“2016.11.21更新日志”
• handleEdit={this.handleEdit}
• treeModel={true}
• paddingSize={5}

各个说明

• dataSource 数组

• 表格内部数据来源

• columns 数组

• 表格列说明

• scrollTop

• 设置 表格内部滚动条scrollTop

• loadDefault

• 是否使用默认的loading

• customLoading

• 外部传入loading的形式

• onSortChange

• 表格头可以排序时候的回调方法

• onColumnResize

• 表格列进行宽度调整时候的回调方法

• handleColumnOrderChange

• 列进行拖拽的时候的回调

• emptyText

• 没有数据的时候展示内容

• singleWordWidth

• 单个文字的宽度 用来计算表格内容和表头进行宽度调整时候默认是 6

• outerWidth

• 外部容器的宽度

• virtualRendering

• 以前的一个保留 表示使用虚拟的滚动条加载 现在应该没有什么用处了。

• style

• 表示表格的样式

• outHeight

• 表格的高度

• rowType

• 表示行的类型 这个类型是可以枚举的类型 small medium big 默认是20 但是这个是必须传递的

• treeModel

• 是否有树形展示

• paddingSize

• 表格间距设置

非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（必填） //data-grid的列名

memoryHash： "ceshi"  //组件记忆拖动列宽时的自定义页面hash值

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

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

Basic使用方法

1.安装npm组件包

npm install @beisen/data-grid --save-dev

2.引用组件

import DataGrid from "@beisen/data-grid"

3.传入参数

const data = [
  { id: 0, index: 1, firstName: 'John', city: 'London', email: '[email protected]', 'bgColor': '#f28d48'},
  { id: 1, index: 2, firstName: 'John', city: 'London', email: '[email protected]','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

2017.5.16 更新日志：

增加了传入滚动条位置scrollTop的参数，根据此参数可以定位滚动条位置 提供获得滚动条位置回调，

let scrolltop = this.refs.realGrid.getScrollTop();

  console.log("scrolltop == "+scrolltop)

通过设置在DataGrid上的ref属性来获得子组件

2017.1.9 更新日志：

1 修改固定列 左右固定列的实现方式，从覆盖表体变成拼接表体。 2 底部的滚动条使用模拟滚动条，不是滚动区域的滚动条。

2016.12.15 更新日志：

1 使用原生滚动条，拖动滚动条时不在从新render。提高效率 2 增加了对浏览器滚动条款的判断

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}须保留，否则固定表头无法正确显示

CHANGELOG

0.1.3

-- demo中增加使用no data展示的样式

0.1.2

-- demo中增加拖拽、改变列宽和无数据提示使用示例

0.1.1

-- demo中增加传入loading的参数设置，支持传入loading组件

0.0.9

-- 支持表头自定义样式 -- 开发环境增加case-sensitive-paths-webpack-plugin插件

0.0.8

-- 修复排序bug以及增加loading接口

0.0.7

-- 解决中文命名，但字段名为英文 -- 支持全选