uxcore-list

React list with built-in actionBar, Search & Pagination

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();
        }
    }
    
]