node package manager

@beisen/data-grid

data-grid

非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的列名

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