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: 'jon@gmail.com', 'bgColor': '#f28d48'},
  { id: 1, index: 2, firstName: 'John', city: 'London', email: 'jon@gmail.com','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

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

@beisen-platform/data-grid

data-grid

各个说明

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

参数

Basic使用方法

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

2017.5.16 更新日志：

2017.1.9 更新日志：

2016.12.15 更新日志：

2016.12.6 更新日志：

2016.11.22 （tag0.1.48）更新日志：

2016.11.11更新日志：

注意：

2016.11.15更新日志：

2016.11.21更新日志：

注意：

0.1.3

0.1.2

0.1.1

0.0.9

0.0.8

0.0.7

Readme

Keywords

Package Sidebar

Install

Repository

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@beisen-platform/data-grid

data-grid

各个说明

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

参数

Basic使用方法

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

2017.5.16 更新日志：

2017.1.9 更新日志：

2016.12.15 更新日志：

2016.12.6 更新日志：

2016.11.22 （tag0.1.48）更新日志：

2016.11.11更新日志：

注意：

2016.11.15更新日志：

2016.11.21更新日志：

注意：

0.1.3

0.1.2

0.1.1

0.0.9

0.0.8

0.0.7

Readme

Keywords

Package Sidebar

Install

Repository

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads