1.0.0 • Published 8 years ago

rj-react-ui-min v1.0.0

Weekly downloads
1
License
MIT
Repository
-
Last release
8 years ago

RJ-REACT-UI

TOC

DataTable

数据表格

props

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

props.pagination

分页属性

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

props.header

表头数组

列描述:

属性名称类型是否必须默认值说明
keystringtrue
text标题文本stringtrue排序函数
operationColumn是否为操作列boolfalse
width宽度number
minWidth最小可变宽度number
maxWidth最大可变宽度number
fixed固定宽度boolfalse
sortable可排序boolfalse
sort排序函数function接收参数(prev, next)
dataType列数据类型string可选值:string, number, date, bool
className样式名称string
style内联样式object
textAlign标题文本对齐方式stringcenter可选值: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]}]

数据行属性:

属性名称类型是否必须默认值说明
keystringtrue必须与header中的key相对应
value行值objectfalse
cells数据单元arraytruecell

cell可为字符串或对象,为对象时属性:

属性名称类型是否必须默认值说明
operationColumn是否为操作列boolfalse
content内容object如果设置该值则值和格式化函数无效
valueany
text文本string
format格式化函数function接收参数(value)
className样式名称string
style内联样式object
textAlign标题文本对齐方式stringcenter可选值: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当前页内计算stringtotal可选值为:sub,表示小计行,如果表格只有一页则小计行不显示; total,表示合计行
labelstring
cells文本object(key pairs)表头键值对,headKey对应header中每列设置的key值

cells值属性:

属性名称类型是否必须默认值说明
inCurrentPage当前页内计算boolfalse
valueany
text文本string
content内容object设置后,无value值时有效,格式化函数无效
format格式化函数function接收参数(value)
className样式名称string
style内联样式object
textAlign标题文本对齐方式stringcenter可选值:left, center, right
aggregate内容聚合函数stringcount可选值: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是否显示booltrue
max最大化boolfalse
title标题string对话框
width宽度number600
height高度number500
minWidth最小宽度number
minHeight最小高度number
icons标题栏右边显示的图标按钮arrayModal.MODAL_ICON'resize', 'reload'
hideButtons隐藏底部操作面板按钮栏boolfalse
resizeable窗口是否拖动改变大小booltrue
buttons显示的按钮arrayModal.MODAL_BUTTON.CONFIRM, Modal.MODAL_BUTTON.CANCELModal.MODAL_BUTTON
padding内边距string10px
confirmLoading确认按钮加载状态boolfalsetrue时确定按钮显示为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>);
    }
}