/**
* created by hao.cheng on 2017/4/15.
*/import react from 'react';
import from 'antd';
const data = [, , , , , , , ];
class sorttable extends react.component ;
handlechange = (pagination, filters, sorter) =>
//filters:
//sorter:, order: "ascend", field: "name", columnkey: "name"}
console.log('various parameters', pagination);
console.log('various parameters', filters);
console.log('various parameters', sorter);
this.setstate();
};clearfilters = () => );
};clearall = () => );
};setagesort = () => ,
});};
render() = this.state;
sortedinfo = sortedinfo || {};
filteredinfo = filteredinfo || {};
const columns = [,,],
filteredvalue: filteredinfo.name || null,
onfilter: (value, record) => record.name.includes(value),
//sorter: (a, b) => a.name.length - b.name.length,
sorter: (a, b) => a.name.localecompare(b.name),//排序規則
sortorder: sortedinfo.columnkey === 'name' && sortedinfo.order,
}, , ,,],
filteredvalue: filteredinfo.address || null,
onfilter: (value, record) => 遍歷資料
return record.address.includes(value);//所有的資料中 包含value(浙江省)的篩選出來
},//sorter: (a, b) => a.address.length - b.address.length,
sorter: (a,b)=>(a.address).localecompare(b.address),
sortorder: sortedinfo.columnkey === 'address' && sortedinfo.order,
}];return (
年齡排序
清除篩選
清除篩選和年齡排序);}
}export default sorttable;
名字排序
名字排序
年齡排序
年齡排序
位址排序
位址排序
條件篩選
條件篩選
Ant Design Pro 中的服務端互動
在 ant design pro 中，乙個完整的前端 ui 互動到服務端處理流程是這樣的 ui 元件互動操作 呼叫 model 的 effect 呼叫統一管理的 service 請求函式 使用封裝的 request.js 傳送請求 獲取服務端返回 然後呼叫 reducer 改變 state 更新 m...
Ant Design Pro 運用點滴 4
z turn 開發過程中，有時可以使用本地mock，對於乙個喜歡使用php的我來說，就不免想跨域呼叫一下資料爽爽。但是，官方文件對此寫得不是很多。但是又不是沒寫，只要靜下心，總會找到點什麼。在and design的文件，專案實戰這一節裡，寫了這麼幾行。這個.webpackrc配置不得不讓人注意。沿著...
ant design pro 踩坑之路
新入手react 我司要用螞蟻金服那個框架 從頭開始熟悉。慢慢踩坑之路。實時更新 1.使用靜態檔案資源 2.關閉自帶eslint檢查 找到package.json 檔案 刪除裡面的 pre commit npm run lint staged 3.proxy proxy裡面的 的千萬不要和你的位址裡...