1.1.20-rc.4 • Published 5 years ago

@beisen-platform/data-grid v1.1.20-rc.4

Weekly downloads
15
License
ISC
Repository
-
Last release
5 years ago

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

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