@yuan.gao4/grid

DEMO:

import React from 'react';
import dom  from 'react-dom';
import Grid from '@en/grid';

var Me = React.createClass({
    getInitialState(){
        return {
            data:[],

            columns:
            [
                {title:'',key:'index',style:{width:100}},
                {title:'场站名称',key:'name'},
                {title:'titleA',key:'key1'},
                {title:'titleB',key:'key2',style:{textAlign:'right',width:100,backgroundColor:'grey'}},
                {title:'titleC',key:'key3'},
                {title:'titleD',key:'key4',fmt:(data,row)=><a href={'http://xxx.com/'+row.name} target='_blank' style={{color:'red'}}>data</a>}
            ]
        }
    },

    //pageSize为分页大小，目前由控件内部ui指定，由用户选择。如果pager为false，则不开启分页，pageSize将=0
    //page为当前分页，从0开始
    //sortColumn为当前排序的列，如果没有任何列被排序，则为空
    //sortDir为排序方向，0为未排序，1为asc，2为des
    onData(pageSize,page,sortColumn,sortDir){
        console.log(pageSize,page,sortColumn,sortDir)

        //在这里发请求，获取数据
        //grid初始化的时候会先调用一次，因此可以把ajax请求直接写在这里简化程序，无需另外初始化
        //后端需要完成排序和分页,这里没有做，因此界面上是看不出排序效果的
        //ajax('xxxx',{pageSize,page,sortColumn,sortDir},'POST')
        //.then(data=>this.setState({data:data}))

        //demo没有后端，前端简单模拟一下
        var data = [
            {name:'场站1',key1:1,key2:2,key3:3,key4:1},
            {name:'场站2',key1:1,key2:2,key3:3,key4:3},
            {name:'场站3',key1:1,key2:2,key3:3,key4:4},
        ];

        //增加index字段，这里展示一下如何自定义index字段
        data.forEach((o,i)=>Object.assign(o,{index:i+page*pageSize+1}))

        this.setState({data:data})
    },

    //单行选中操作
    onSelect(row){
        alert(`你点了"${row.name}"`);
    },

    //react渲染
    render(){
        return <Grid
            style={{}}

            cellStyle={{}}
            alterStyle={{}}
            titleStyle={{}}                

            frozenColumn={1}
            frozenAfter={1}
            frozenStyle={{}}
            sortStyle={{}}

            columns= {this.state.columns}
            language={'zh'}
            data={this.state.data}
            pager={true}
            onChange={this.onSelect}
            onData={this.onData}
            count={3000}
        />;
    }

    
})

dom.render(<Me />, document.getElementById('container'));

说明：

• demo较丑请忽略，body加上蓝绿色的背景色就正常了

• style和className属性将直接作用在生成的容器div上,也就是外框。注意，整体的font-size在这里设置

• cellStyle 将作用于每一个cell之上，优先级最低，会被所有其他style覆盖

• alterStyle 将作用于隔行的cell之上

• titleStyle 将作用于标题栏的每个cell上

• hoverStyle 将作用于当前鼠标hover的行上

• sortStyle 将作用于当前被排序的列的title格上

• frozenStyle 将作用于被冻结的列上

• frozenColumn为锁定列的数量，默认为0。如果为n，则锁定最左面的n列，不会受scroll影响，也无法被拖动。

• frozenAfter为尾部锁定列的数量，默认为0。如果为n，则锁定最右面的n列，不会受scroll影响，也无法被拖动。

• columns 为每个列的描述， 主要属性为 title, style,和 fmt

  • key 为列的唯一id，在data的行中，作为提取内容的key。如果没有提供，则按照数组位置提取。
  • title为字符串，也可以是jsx对象，用于显示于标题栏内
  • style为列的css描述，不可以设置高度（显然不能在一行里面单独设置某一列的高度），其他css属性都将作用于整个列上的每一个cell，包括标题和数据区域,优先级很高，覆盖上面的多数属性。不可设置left，top等位置属性。
  • fmt为格式化函数，非常重要，自定义表格内容全靠他。data内的数据尽可能使用数字，当它们被渲染的时候则需要格式化，比如加上千分位，单位等。有时候可以直接返回一个dom按钮，上面绑定click操作进行行内操作。函数参数为 (cell,row)，cell为当前渲染格的数据，row为当前行的数据。使用方式参考上面demo。

• data为表格数据，为一系列数据对象的数组，格式参考demo。其实就是一组键值对。也支持二维数组形式。

• pager为bool类型，指定是否要显示分页器

• onChange为回调函数，当用户点击一行时被调用，唯一参数即被点击行当数据。

• onData为加载数据回调，当组件加载，排序或者分页时，都会调用，以获取新的数据。函数参数参考上面demo

• count为数据总条数，将被用于显示在翻页器内左下角，以及计算应该分几页

• onResizeColumn为回调函数，当某一列被用户调整宽度之后，即会调用，形参：onResizeColumn(key,newWidth)

• Grid支持列拖拽，列resize。

• language为国际化参数，可选'en','zh'

Q & A

Q:我如何指定某一列的颜色？ A:Columns属性内的对应object里，可以设置style属性，style都将被应用到这一列的每个格子上，这里只需设置backgroundColor即可:columns[3].style.backgroundColor = 'red';

Q:我如何锁定第一列，比如场站名称，不被滚动？ A:frozenColumn={1}

Q:我如何锁定最后一列，比如“查看”“删除”“修改”按钮，不被滚动？ A:frozenAfter={1}

Q:我如何锁定中间某列，不被滚动？ A:别闹

Q:我不想自己做排序，也不想后台排序 A:不提供onData属性即可，控件本身支持内部排序

Q:有些列我不需要它排序 A:columns[3].sortable=false