List 列表元件開發
npm
npm i react-router-dom react-table-list-beta
git
https://github.com/1987showsun/list-table-component-by-React-dev
Demo
Ex columns json
typeSStyle : list
"title" : "鱼种" //column名稱 "columnKey" : "name" //keyname "total" : "" //該欄為統計,如:輸入文字就直接顯示文字,可空直就將該欄位相加得到總合 "link" : true //開啟該欄位連結 "path" : "/xxxx/zzzz/aaaa"//欄位網址 "sort" : true //排序開關 //status 0:一般排序 1:遞減 2:遞增 ... "title" : "鱼种" //column名稱 "columnKey" : "fishMoney" //keyname "total" : "" //該欄為統計,如:輸入文字就直接顯示文字,可空直就將該欄位相加得到總合 "link" : true //開啟該欄位連結 "path" : "/xxxx/zzzz/aaaa" //欄位網址
typeSStyle : block (固定)
"title" : "Cover" //column名稱 "columnKey" : "cover" //keyname "link" : true //開啟該欄位連結 "path" : "/info/teams" //欄位網址 "title" : "Content" //column名稱 "columnKey" : "" //有 children keyname 該欄位 "children" : "name""name_en"//children keyname 非固定,自取名需對應 data keyname "link" : true //開啟該欄位連結 "path" : "/info/teams" //欄位網址
Ex Data json
typeSStyle : list
"id" : "1" "name" : "名稱1" "fishMoney" : 1000 ... "id" : "1" "name" : "名稱1" "fishMoney" : 1000
typeSStyle : block (固定)
"id" : "1" "cover" : "" "name" : "名稱1" "name_en" : "abcd" ... "id" : "1" "cover" : "" "name" : "名稱1" "name_en" : "abcd"
Ex instructions:
; ; <BrowserRouter> ... <List match = thispropsmatch total = total limit = limit columns = thead'test' data = data currentPage = thispropsmatch'params''current' paginationStyle = "model1" paginationPath = `/asd` paginationSearch = `?testSearch=zzzz` returnCurrentPage = thisreturnCurrentPage returnSort = thisreturnSortFreeFunctionName fixedWidth = thisstatefixedWidth fixed = "thead""tfooter" /> ... </BrowserRouter>
Api
api | method | description |
---|---|---|
total | total={ totalNumber} | ajax response data length |
limit | limit={ limitNumber} | show data length |
columns | columns={ columnsObject } | columns json |
data | data={ response data } | response data json 需要與 columnsKey 取名一樣 |
currentPage | currentPage={ current Page Number } | current Page number |
paginationStyle | paginationStyle = {"model1"or"model2"} | pagination style |
paginationPath | paginationPath = { path link url string } | 頁碼連結 |
paginationSearch | paginationSearch = { loaction.search } | ex: ?aaaa=111111&bbbb=222222..... |
returnCurrentPage | returnCurrentPage={ this.returnCurrentPage.bind(this) } | returnCurrentPage Free name |
fixed | fixed={["thead","tfooter"]} | 可上下固定或其中一個固定 typeof:object status: 1.thead 2.tfooter |
showLength | showLength={showLength number} | columns 一次可顯示比數 |
typeStyle | typeStyle= "block" / "list" | Display method Block or Column |
addClassName | addClassName= "XXXX" | Additional class name |
returnSort | returnSort={this.returnSortFreeFunctionName.bind(this)} | returnSortFreeFunctionName Name by yourself |