@alilc/pro-table v1.0.0

title

deep-table

intro component

API

移动端卡片模式专用

pagination 翻页器 API

数据源配置例子

{
    "data":[
        {
            "contractDate" : {
                "start" : 1534942658570,
                "end" : 1534944858570,
            },
            "entryDate" : 1534942658570,
            "name" : "王小",
            "id" : 1,
            "salary" : 35000,
            "email" : "xw_1@abc.com",
            "moneyRange" : {
                "lower" : 108,
                "upper" : 944,
            },
        }
        ...
    ],
    "currentPage":1,
    "totalCount":30,
}

columns 配置的例子

"columns" : [
                {
                  //分组
                  isGroup: true,
                  title: 'xxxx',
                  children: [
                    {/*{},*/}
                    {/*{}*/}
                  ]
                },
                {
                    "dataKey" : "name", //value的字段名
                    "editType" : "text",//编译状态下的编辑类型，目前支持select,text,radio,date,custom（自定义编辑）
                    "dataType" : "text",//渲染格式化的类型，目前支持text,timestamp,cascadeTimestamp,money,moneyRange
                    "width" : 150,
                    "title" : "姓名",//标题b
                    "align" : "right", //对齐
                    "sortable" : true, //可排序
                    "hidden" : false,//是否隐藏列
                    "highlight" : true,//是否着重突出显示，字体加粗，仅限手机端
                     "editProps" : {    //编辑状态下的配置
                        rules: [{  //校验规则，当saveRow的时候会调用
                            required: true,
                            message: 'can not be empty',
                            trigger: ['blur','onChange']
                        }]
                     },
                    "canEdit":(rowData)=>{//动态控制列是否可以编辑
                        return true;
                    },
                },
                {
                     "dataKey" : "sex",
                    "editType" : "radio",
                     "width" : 150,
                     "title" : "性别",
                     "editProps" : {
                         "dataSource" : [ //
                                {label:'男', value:'男'},
                                  {label:'女', value:'女'},
                    ]
                    },
                 },
                {
                     "dataKey" : "level",
                    "editType" : "select",
                     "width" : 150,
                     "title" : "级别",
                     "editProps" : {
                         "dataSource" : [
                                {label:'高级', value:'高级'},
                                  {label:'中级', value:'中级'},
                                {label:'初级', value:'初级'},
                    ]
                    },
                 },
                {
                    "dataKey" : "entryDate",
                    "editType" : "date",
                    "dataType" : "timestamp",
                    "width" : 180,
                    "title" : "入职日期",
                    "timeFormatter" : "YYYY-MM-DD",//
                },
                {
                    "dataKey" : "salary",
                    "dataType" : "money",
                    "width" : 150,
                    "title" : "月薪",
                    "editType" : "custom",
                    "editProps" : {
                        renderField:(props)=>{  //定义如何渲染自定义编辑组件
                            return <Input {...props}/>;
                        },
                        rules: [{  //
                            required: true,
                            message: 'can not be empty',
                            trigger: []
                        }]
                     },
                },
                {
                    "dataKey" : "test1",
                    "width" : 150,
                    "title" : "自定义列",
                    "render" : function (value, index, rowData) {  //自定义渲染
                        return "我是自定义列";
                    },
                },
                {
                    "dataKey" : "contractDate",
                    "dataType" : "cascadeTimestamp", //
                    "width" : 200,
                    "title" : "合同日期",
                    "timeFormatter" : "YYYY-MM-DD",
                },
            ],

actionBar 配置的例子

    "actionBar" : [
        {
            "title" : "操作1",
            "callback" : function () {
                console.log('操作1', arguments);
            },
        },
        {
            "title" : "操作2",
            "callback" : function () {
                console.log('操作2', arguments);
            },
        },
    ],

actionColumn 配置的例子

    "actionColumn" : [
         {
             "title" : "编辑",
             "callback" :  (rowData)=> {
                 return me.tableRef.current.getInstance().editRow(rowData);
             },
             "device":["desktop"]
         },
         {
             "title" : "保存",
             "callback" : (rowData)=> {
                 return me.tableRef.current.getInstance().saveRow(rowData); //必须return Promise，因为校验是异步过程
             },
             "mode":"EDIT"
         },
         {
             "title" : "重置",
             "callback" : (rowData)=> {
                 return me.tableRef.current.getInstance().resetRow(rowData);
             },
             "mode":"EDIT"
         },
         {
             "title" : "详情",
             "callback" : function () {
                 console.log('详情', arguments);
             },
         },
         {
             "title" : "删除",
             "callback" : function () {
                 console.log('删除', arguments);
             },
         },
         {
             "title" : "复制",
             "callback" : function () {
                 console.log('复制', arguments);
             },
         },
         {
             "title" : "下架",
             "callback" : function () {
                 console.log('下架', arguments);
             },
             "isDisabled" : function (item, index, actionRowData) {
                 console.log('isDisabled', arguments);
                 return true;
             },
              "mode":"EDIT"
         },
     ],

actionBar 配置的例子

    "linkBar" : [
        {
            "title" : "外链1",
            "callback" : function () {
                console.log("外链1", arguments);
            },
        },
        {
            "title" : "外链2",
            "callback" : function () {
                console.log("外链2", arguments);
            },
        },
    ],

行排序配置例子

    "rowOrder" : {
        "defaultValue" : {
            "text" : '排序方式一',
            "value" : '123',
        },
        "items" : [
            {
                "text" : '排序方式一',
                "value" : '123',
            },
            {
                "text" : '排序方式二',
                "value" : '456',
            },
        ],
        "onChange" : function (data) {
            console.log(data);
        },
    },

自定义栏配置例子

    "customBarItem" : {
        "render" : function () {
            return (
                <div style={{color : 'red'}} onClick={(e) => {
                    console.log(e);
                }}>自定义内容</div>
            );
        },
        "rightRender": () { },
        "bottomRender": () {}
    },

混合模式 配置的例子

    props:{
        "expandedRowRender" : (record, index) => {
            return (
                <div style={{lineHeight : '22px'}}>
                    我是展开的内容 <br/>
                    我是展开的内容 <br/>
                </div>
            );
        },
        "expandedRowIndent" : [2, 2],
        "onRowOpen" : (openRowKeys, currentRowKey, expanded, currentRecord) => {
            console.log(openRowKeys, currentRowKey, expanded, currentRecord)
        },
    }

pagination 配置的例子

 'pagination' : {
        'size' : "medium",
        'type' : "normal",
        'shape' : "arrow-only",
        'pageSize' : 10,
        'pageSizeSelector' : false,
        'pageSizeList' : "5,10,20",
        'pageSizePosition' : "end",
        "paginationPosition" : "right",
        'hideOnlyOnePage' : false,
        'showJump' : true,
    }