ANT DESIGN

最近做和数据相关的一些系统，用到ANT DESIGN，其中用到最多的又是Table组件，这里做了下数据方面的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var resData = [
                {
                    "name": "Aaayang",
                    "age": "22",
                    "sex": "男",
                    "address": "河南"
                },
                {
                    "name": "Dance",
                    "age": "18",
                    "sex": "女",
                    "address": "北京"
                },
                {
                    "name": "Yelya",
                    "age": "92",
                    "sex": "man",
                    "address": "深圳"
                },
                {
                    "name": "Yose",
                    "age": "42",
                    "sex": "男",
                    "address": "潮汕"
                }
            ];
        var searchFilter = function(all, part) {
            let out = [];
            all.forEach((item)=>{
                let i = {};
                part.forEach(k=>{
                    i[k] = item.hasOwnProperty(k) ? item[k] : '';
                })
                out.push(i);
            })
            return out;
        };
        var enToCh = function(str) {
            var newStr = str;
            if(str === "name") {
                newStr = "姓名";
            }
            else if(str === "age") {
                newStr = "年龄";
            }
            else if(str === "sex") {
                newStr = "性别";
            }
            else if(str === "address") {
                newStr = "地址";
            }
            return newStr;
        }
        function requestFilterCon(allCon, ...partCon) {
            let tempColumns = [], tempData = [], all = allCon, part = partCon, result = searchFilter(all, part);
            // tempColumns
            for(let i = 0, len = part.length; i < len; i ++) {
                if(part[i] != "sex") {// 可以通过这里控制差异性，例如title不展示sex
                    var tempJson = {
                        title: enToCh(part[i]),
                        dataIndex: part[i]// ...
                    };
                    tempColumns.push(tempJson);
                }
            }
            // tempData
            for (let i = 0, len = result.length; i < len; i++) {
                var newJson={};
                for(var j = 0; j < part.length; j ++ ) {
                    newJson["key"] = i;// 这里也可以控制数据的差异性，注意分页每次请求的时候当前列表的key和上次列表的key是相同的，都是从0开始的，做选择的时候会有坑，这里的i可以先用Math.random()去替换。唯一且确定的ID即可，可以根据pageNum去搞！！！
                    newJson[part[j]] = result[i][part[j]];
                }
                tempData.push(newJson);
            }
            console.log(tempColumns, tempData);
        }
        requestFilterCon(resData, "name", "age", "sex");// 所有数据，要展示数据
    </script>
</body>
</html>

表格

listCon(listArr) {
    listArr = listArr || [];
    var self = this, iNum = 0, tempTd = [], tempTr = [];
    
    for(var i = 0, len = listArr.length; i < len; i ++ ) {
        iNum ++;
        tempTd.push(
            <td key={i}>
            </td>
        );
        if(iNum % 3 == 0) {
            tempTr.push(
                <tr key={iNum}>{tempTd}</tr>
            )
            tempTd = [];// mark
        }
    }
    if(tempTd.length == 1) {
        tempTr.push(
            <tr key="1x">{tempTd}
                <td>
                </td>
                <td>
                </td>
            </tr>
        );
    }
    else if(tempTd.length == 2) {
        tempTr.push(
            <tr key="2x">{tempTd}
                <td>
                </td>
            </tr>
        );
    }
    return tempTr;
}

绑定this的另一种写法

onOk={ (() => this.startTrueTest(false)).bind(this) }

ANT DESIGN Table default checked

const rowSelection = {
    getCheckboxProps: record => ({
        defaultChecked:record.key === 2
    })
}

默认checked

// recordAlgoChecked（value集合）格式和dalgoOptionsArr不必一样
<CheckboxGroup options={dalgoOptionsArr} onChange={this.handleChange.bind(this, "modalAlgo")} value={recordAlgoChecked} />

time format

function getLocalTime(nS) {
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');  
}
function getLocalTime(now) {
    now = new Date(now * 1000);
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    if(hour < 10) {
        hour = '0' + hour;
    }
    var minute = now.getMinutes();
    if(minute < 10) {
        minute = '0' + minute;
    }
    var second = now.getSeconds();
    if(second < 10) {
        second = '0' + second;
    }
    return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

选择数据问题

// 场景：选择第一条数据，删除，拉取后端数据，第一条在前端仍是选中的，这不是我们想要的
<Table rowSelection={rowSelection}/>
const rowSelection = {
    selectedRowKeys,
    onChange: function (selectedRowKeys, selectedRows) {
        this.setState({ selectedRowKeys });
    }
};
// 删除成功后的操作，因为每次重新获取的数据的key都是重新序列化的，不能通过key的唯一来区分选中状态，也不能Math.random()，因为切换到之前选中页时，不能保证仍为选中状态
this.setState({
    selectedRowKeys: []
});

 

posted @ 2017-08-18 10:30  DuangDang  阅读(384)  评论(0)  编辑  收藏  举报