uxcore-list component for uxcore.


Keywords
react, react-component, uxcore-list, List, component
License
MIT
Install
npm install uxcore-list@0.1.8

Documentation

uxcore-list

React list with built-in actionBar, Search & Pagination

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

Development

git clone https://github.com/uxcore/uxcore-list
cd uxcore-list
npm install
npm run server

if you'd like to save your install time,you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-list
cd uxcore-list
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/list

Contribute

Yes please! See the CONTRIBUTING for details.

API

Props

Name Type Required Default Since Comments
width number optional auto - 表格的宽度
height number optional auto - 表格的高度
showPager boolean optional true - 是否显示分页
showPagerTotal boolean optional false - 是否显示分页的总数部分
showSearch boolean optional false - 是否显示内置的搜索栏
locale string optional zh-cn - 国家化,目前支持 zh-cn/en-us
beforeFetch function(data, from) optional noop - 两个参数,data 表示表格请求数据时即将发送的参数,from 表示这次请求数据的行为从哪里产生,内置的有 search(搜索栏),order(排序) & pagination(分页),该函数需要返回值,返回值为真正请求所携带的参数。
processData function(data) optional noop - 有时源返回的数据格式,并不符合 Table 的要求,可以通过此函数进行调整,参数 data 是返回数据中 content 字段的 value,该函数需要返回值,返回值为符合 content 字段 value 的数据结构。
pageSize number optional 10 - 每页显示多少条数据
pagerSizeOptions array optional [10,20,30,40] - 显示的可选 pageSize
data object optional - - 在远端数据还没有返回时用作默认数据
fetchUrl string optional "" - 表格的数据源
fetchParams object optional - - 表格在请求数据时,会额外附带的参数,具有最高的优先级
actionBar object/array optional null - 表格内置的操作条配置,详细见此
onFetchError function(result) optional noop - 在返回数据中 success 不是 true 的情况下触发,返回所有请求得到的数据

返回的数据格式

   {
    "content":{
        "data":[
            {   
                "id":'1'
                "grade":"grade1",
                "email":"email1",
                "firstName":"firstName1",
                "lastName":"lastName1",
                "birthDate":"birthDate1",
                "country":"country1",
                "city":"city1"
            }
            ...
    
        ],
        "currentPage":1,
        "totalCount":30
    },
    "success": true,
    "errorCode": "",
    "errorMsg": ""
    }

上面的数据格式是 ajax 返回的数据格式要求,如果你通过 jsxdata 传值,只需要 content 里面的内容。

{
    "data":[
        {   
            "id":'1'
            "grade":"grade1",
            "email":"email1",
            "firstName":"firstName1",
            "lastName":"lastName1",
            "birthDate":"birthDate1",
            "country":"country1",
            "city":"city1"
        }
        ...

    ],
    "currentPage":1,
    "totalCount":30
}

ActionBar 配置的例子

// actionBar 支持传入一个对象
actionBar: {
    "新增行": () => { // 点击回调
        me.refs.grid.addEmptyRow();
    },
    "编辑所有行": () => {
        me.refs.grid.editAllRow();
    }
}

// 或者定制能力更加强大的数组
actionBar: [
    {
        title: '新增行', // 显示名称
        callback: () => { // 点击回调
            me.refs.grid.addEmptyRow();
        },
        render: (title) => { // 定制渲染
            return <Button>{title}</Button>
        }
    },
    {
        title: "编辑所有行",
        callback: () => {
            me.refs.grid.editAllRow();
        }
    },
    {
        title: "保存所有行",
        callback: () => {
            me.refs.grid.saveAllRow();
        }
    }
    
]