最近做和数据相关的一些系统，用到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: [] });