RJ-REACT-UI

[TOC]

DataTable

数据表格

props

属性	名称	类型	默认值	可用值	示例说明
simpleRender	简单呈现	bool	true		提高渲染性能。当设置为 true 时 header 按设置顺序显示，不能使用排序,header 中 displayOrder 及 hidden 属性无效，header 与row 对应不依赖 key，按数组顺序呈现等。
loaded	加载是否已完成	bool	true
hideLoader	隐藏加载动画	bool	false
showCheckbox	在行标题显示复选框	bool	false
hideRowNumber	隐藏行号	bool	false
openRowSelect	开启行选模式	bool	false
pagination	分页属性	object
toolbar	工具栏	Toolbar
query	查询栏	ConditionQueryPanel
header	表头	array
rows	行	array
footer	汇总	array			合计、小计
getCheckedValues	获取勾选行	func			返回已勾选行值数组，其值为在 rows 中每行定义的 value 值
setLoaded	设置表格数据加载状态	func		参数为 true 或 false	控制表格中的加载动画显示。当 hideLoader 为 false 时有效。

props.pagination

分页属性

属性	名称	类型	默认值	说明
searchPositionTop	结果中搜索框顶部显示	bool	false
positionTop	顶部显示	bool	false
hide	隐藏分页	bool	false
remote	远程分页	bool	false	从远程服务器获取行，关闭表内分页
rowCount	行数	number
pageCount	总页数	number
pageSize	每页显示数据行数	number	20
pageNumber	当前页数	number

props.header

表头数组

列描述：

属性	名称	类型	是否必须	默认值	说明
key	键	string	true
text	标题文本	string	true	排序函数
operationColumn	是否为操作列	bool		false
width	宽度	number
minWidth	最小可变宽度	number
maxWidth	最大可变宽度	number
fixed	固定宽度	bool		false
sortable	可排序	bool		false
sort	排序函数	function			接收参数(prev, next)
dataType	列数据类型	string			可选值：string, number, date, bool
className	样式名称	string
style	内联样式	object
textAlign	标题文本对齐方式	string		center	可选值：left, center, right

示例：

[
    {
        text: '',
        width: 80,
        minWidth: 60,
        maxWidth: 100,
        fixed: true,
        sortable: true,
        dataType: '',
        className: '',
        style: {},
        textAlign: 'center',
        sort: (prev, next)=>{}
    },
]

props.rows

数据行数组

[{value:{}, cells:[cell]}]

数据行属性：

属性	名称	类型	是否必须	默认值	说明
key	键	string	true		必须与header中的key相对应
value	行值	object		false
cells	数据单元	array		true	[cell]

cell可为字符串或对象，为对象时属性：

属性	名称	类型	默认值	说明
operationColumn	是否为操作列	bool	false
content	内容	object		如果设置该值则值和格式化函数无效
value	值	any
text	文本	string
format	格式化函数	function		接收参数(value)
className	样式名称	string
style	内联样式	object
textAlign	标题文本对齐方式	string	center	可选值：left, center, right

示例：

[
    {
        value: 1,
        cells: [
            {
                operationColumn: true,
                content: (<Icon icon="edit" />),
                text: '',
                value: 1,
                format: (value)=>Formatter.toPriceDash(value),
                className: '',
                style: {},
                textAlign: 'center',
            },
            ...
        ]
    },
    ...
]

props.footer

表尾汇总行数组

[
    {
        type: 'sub', 
        label: '',
        cells: {
            [headKey]: {}
        }
    },
]

属性	名称	类型	是否必须	默认值	说明
type	当前页内计算	string		total	可选值为：sub，表示小计行，如果表格只有一页则小计行不显示； total，表示合计行
label	值	string
cells	文本	object(key pairs)	是		表头键值对，headKey对应header中每列设置的key值

cells值属性：

属性	名称	类型	默认值	说明
inCurrentPage	当前页内计算	bool	false
value	值	any
text	文本	string
content	内容	object		设置后，无value值时有效，格式化函数无效
format	格式化函数	function		接收参数(value)
className	样式名称	string
style	内联样式	object
textAlign	标题文本对齐方式	string	center	可选值：left, center, right
aggregate	内容聚合函数	string	count	可选值：count, sum, avg, max, min
customerAggregate	自定义聚合函数	function		如果设置该函数，则设置的内置聚合函数无效

示例：

[
    {
        type: 'sub',
        cells: {
            amount:{
                inCurrentPage: true,
                text: '',
                value: 1,
                customerAggregate: (rows, columnIndex) => { }, 
                format: (value)=>Formatter.toPriceDash(value),
                className: '',
                style: {},
                textAlign: 'center',
            },
        }
    },
]

表格示例：

import React, { Component } from 'react';

import { Formatter, Convert } from 'rj-utils';
import { DataTable, Toolbar, ConditionQueryPanel, Input, Button, Icon } from 'rj-react-ui';

export default class TestTable extends Component {
    constructor(props){
        super(props);
        this.state = {
            licenseNumber: '',
            agencyID: '',
            data: [

            ],
        };
    }

    handleAddClick = () => {
        // TODO
    }

    handleQpIcLicenseNumber = (e) => {
        this.setState({licenseNumber: e.target.value});
    }

    handleQpIcAgencyID = (value) => {
        this.setState({agencyID: value});
    }

    handleSearch = () => {
        // TODO search
    }

    render() {
        let toolbar = (
            <Toolbar>
                <Button rjStyle="primary" onClick={this.handleAddClick}>
                    <Icon icon="plus-circle" /><span>ADD</span>
                </Button>
            </Toolbar>
        );

        let query = (
            <ConditionQueryPanel onSearch={this.handleSearch}>
                <ul>
                    <li>
                        <label>车牌号码：</label>
                        <Input placeholder="车牌号码"
                            value={this.state.licenseNumber}
                            onChange={this.handleQpIcLicenseNumber} />
                    </li>
                    <li>
                        <label>服务机构：</label>
                        <Input type="select" value={this.state.agencyID} onChange={this.handleQpIcAgencyID} />
                    </li>
                </ul>
            </ConditionQueryPanel>
        );

        let header =
            [
                { key: 'operation', text: '操作', width: 80, fixed: true, operationColumn: true },
                { key: 'agencyName', text: '机构', width: 60, sortable: true },
                { key: 'customerName', text: '客户名称', width: 80, sortable: true },
                { key: 'channelName', text: '渠道名称', width: 80, sortable: true },
                { key: 'amount', text: '金额', width: 100, sortable: true },
                { key: 'createTime', text: '制单日期', width: 100, sortable: true, fixed: true },
            ];
        
        let rows = this.state.data.map((item, index) => {
            let edStyle = {};
            if (item.ExpireDays < 0) {
                edStyle = { backgroundColor: '#ffffcc' };
            }

            return {
                cells: [
                    {
                        key: 'operation',
                        operationColumn: true,
                        content: [
                            <Icon key="dm" icon="detail-ms-o" onClick={()=>{}} />,
                        ]
                    },
                    { key: 'agencyName', value: item.AgencyName },
                    { key: 'customerName', value: item.CustomerName },
                    { key: 'channelName', value: item.ChannelName },
                    {
                        key: 'amount',
                        value: item.Amount,
                        textAlign: 'right',
                        format: (value) => Formatter.toPriceDash(value)
                    },
                    { key: 'createTime', value: item.CreateTime },
                ]
            };
        });

        let footer = [
            {
                type: 'sub',
                label: '小计',
                cells: {
                    agencyName: {
                        inCurrentPage: true,
                        aggregate: 'count',
                        format: (value) => `${value}辆`
                    },
                    amount: {
                        inCurrentPage: true,
                        aggregate: 'sum',
                        format: (value) => Formatter.toPriceDash(value),
                        textAlign: 'right',
                    },
                }
            },
            {
                type: 'total',
                label: '合计',
                cells: {
                    agencyName: {
                        aggregate: 'count',
                        format: (value) => `${value} 辆`
                    },
                    amount: {
                        aggregate: 'sum',
                        format: (value) => Formatter.toPriceDash(value),
                        textAlign: 'right',
                    },
                }
            },
        ];

        let pagination = {};

        return (
            <DataTable 
                toolbar={toolbar}
                query={query}
                header={header}
                rows={rows}
                footer={footer}
                pagination={pagination} />
        );
    }
}

Modal

模态窗口

props

属性	名称	类型	默认值	可用值	示例说明
show	是否显示	bool	true
max	最大化	bool	false
title	标题	string	对话框
width	宽度	number	600
height	高度	number	500
minWidth	最小宽度	number
minHeight	最小高度	number
icons	标题栏右边显示的图标按钮	array		Modal.MODAL_ICON	['resize', 'reload']
hideButtons	隐藏底部操作面板按钮栏	bool	false
resizeable	窗口是否拖动改变大小	bool	true
buttons	显示的按钮	array	[Modal.MODAL_BUTTON.CONFIRM, Modal.MODAL_BUTTON.CANCEL]	Modal.MODAL_BUTTON
padding	内边距	string	10px
confirmLoading	确认按钮加载状态	bool	false		true时确定按钮显示为loading状态
onConfirm	确定回调	func
onCancel	取消回调	func
onClose	关闭回调	func
onReload	重新加载回调	func
onResize	窗口大小改变回调	func
onDownload	下载回调	func
onOpenNew	新窗口打开回调	func

样式说明

Modal 内容为 flex 布局，即 style 的 display 值为 flex。

示例代码

import React, { Component } from 'react';
import { Modal, Button } from 'rj-react-ui';

export default class TestModalPage extends Component {
    constructor(props){
        super(props);
        this.state = { show:false };
    }

    handleToggleModal = () => {
        this.setState({show: !this.state.show});
    }

    handleModalConfirm = () => {
        alert('confirm');
    }

    render() {
        <div>
            <Button onClick={this.handleToggleModal}>显示隐藏对话框</Button>
            <Modal show={this.state.show} onConfirm={this.handleModalConfirm}>
                这是对话框内容
            </Modal>
        </div>
    }
}

Modal.MODAL_ICON

对话框右上角图标

名称	值	说明
DOWNLOAD	download	下载
RELOAD	reload	重新加载
RESIZE	resize	最大化/还原
OPEN_NEW	open_new	新窗口打开

Modal.MODAL_BUTTON

对话框按钮

常量	值	说明
CONFIRM	confirm	确定或是
CANCEL	cancel	取消或否

Modal.MODAL_BUTTON_TYPE

按钮样式

常量	值	说明
DEFAULT	default	默认
YES_NO	yes_no	是否

ModalEnhance

Modal高阶组件

ModalEnhance 作用是在 HTML 页面中的 body 顶层结尾创建 Modal 的宿主结点，用 ModalEnhance 扩展的组件采用 show 方法直接调用。 特别说明： 用 ModalEnhance 时，在 Modal 上需要绑定 onClose, onCancel, onConfirm 事件，一般情况下 onClose 和 onCancel 绑定 props.onClose 和 props.onCancel。

show方法说明

show方法接受一个对象参数，该对象参数可取属性为 Modal 的 props 属性

示例代码

// BaseEdit.jsx

import React, { Component } from 'react';
import { Modal, ModalEnhance, Button } from 'rj-react-ui';

class BaseEdit extends Component {
    constructor(props){
        super(props);
    }

    handleModalConfirm = () => {
        // TODO
        this.props.onConfirm();
    }

    render() {
            <Modal title="编辑基础信息"
                onClose={this.props.onClose}
                onCancel={this.props.onCancel}
                onConfirm={this.handleModalConfirm}>
                {this.props.data.text}
            </Modal>
    }
}

export default ModalEnhance(BaseEdit)

// Index.jsx

import React, { Component } from 'react';
import { Button } from 'rj-react-ui';

import BaseEdit from './BaseEdit.jsx';

export default class BaseEdit extends Component {
    constructor(props){
        super(props);
    }

    handleEditClick = ()=> {
        BaseEdit.show({
            data: { text: '编辑内容' },
            onConfirm: ()=> {
                // TODO 确认回调处理
            }
        });
    }

    render() {
        return (<Button onClick={this.handleEditClick}>编辑</Button>);
    }
}

rj-react-ui

RJ-REACT-UI

DataTable

props

props.pagination

props.header

props.rows

props.footer

Modal

props

样式说明

Modal.MODAL_ICON

Modal.MODAL_BUTTON

Modal.MODAL_BUTTON_TYPE

ModalEnhance

show方法说明

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

rj-react-ui

RJ-REACT-UI

DataTable

props

props.pagination

props.header

props.rows

props.footer

Modal

props

样式说明

Modal.MODAL_ICON

Modal.MODAL_BUTTON

Modal.MODAL_BUTTON_TYPE

ModalEnhance

show方法说明

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads