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