如何在React中使用BodeGrid全自動(dòng)數(shù)據(jù)表格組件-創(chuàng)新互聯(lián)

這篇文章給大家介紹如何在React中使用BodeGrid全自動(dòng)數(shù)據(jù)表格組件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都不銹鋼雕塑小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供企業(yè)網(wǎng)站制作營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

新增和編輯

設(shè)計(jì)思路：

1、設(shè)置每一列的類(lèi)型，比如文本、數(shù)字、圖片、時(shí)間、bool值、下拉選擇框等等。

2、為不同類(lèi)型提供不同的操作組件，比如文本的input組件，圖片的file組件。這樣在新增和編輯的時(shí)候會(huì)根據(jù)列以及其類(lèi)型生成對(duì)應(yīng)的表單。

3、保存用戶輸入，提交至配置的url地址。

查詢、排序、分頁(yè)

查詢、排序和分頁(yè)幾乎是每個(gè)表格頁(yè)面必須的功能，實(shí)現(xiàn)方式也多種多樣，這里介紹表格萬(wàn)能查詢和排序的設(shè)計(jì)思路：

1、每一列是否可以查詢應(yīng)該是可以配置的。

2、針對(duì)不同的數(shù)據(jù)類(lèi)型查詢條件應(yīng)該有所區(qū)別，比如文本有“包含”條件，數(shù)字有“大于”條件等。

3、后端的處理應(yīng)該統(tǒng)一，為每一個(gè)查詢條件編寫(xiě)查詢邏輯是很費(fèi)力不討好的工作。

4、每一列是否可以排序是可以配置的，排序分正序和倒序. 

最后表格的請(qǐng)求體設(shè)計(jì)如下：

{
 "pageIndex":1,
 "pageSize":15,
 "sortConditions":[
  {
   "sortField":"name",
   "listSortDirection":1
  }
 ],
 "filterGroup":{
  "rules":[
   {
    "field":"displayName",
    "operate":"contains",
    "value":"a"
   }
  ]
 }
}

整個(gè)組件的源碼還是比較復(fù)雜，這里就不深入了，有興趣的同學(xué)可以查看react-demo中的bode-grid.js源碼，地址：https://github.com/liuxx001/react-demo.git

不過(guò)使用起來(lái)還是很簡(jiǎn)單的，如下所示：

getInitialState:function () {
 let gridOptions={
  ref:this,
  title:"角色列表",
  url:{
   read:ApiPrefix+"zero/role/GetRolePagedList",
   add:ApiPrefix+"zero/role/CreateRole",
   edit:ApiPrefix+"zero/role/UpdateRole",
   delete:ApiPrefix+"zero/role/DeleteRole"
  },
  columns:[
   {title:"角色名",data:"name",type:"text",editor:{},query:true},
   {title:"顯示名",data:"displayName",type:"text",editor:{},query:true},
   {title:"是否靜態(tài)角色",data:"isStatic",type:"switch",editor:{},query:true},
   {title:"是否默認(rèn)角色",data:"isDefault",type:"switch",editor:{},query:true},
   {title:"操作選項(xiàng)",type:"command",actions:[{name:"設(shè)置權(quán)限",onClick:showPermissionModel}]}
  ]
 };
 return {
  gridOptions: gridOptions
 };
}

很少的代碼就能完全實(shí)現(xiàn)表格的展示、新增、編輯、排序、查詢、分頁(yè)等功能，顯示效果：

BodeGrid表格api：

參數(shù)	類(lèi)型	說(shuō)明	默認(rèn)值
ref	object	ref指向本身，用于行內(nèi)按鈕綁定數(shù)據(jù)	ref:this,固定寫(xiě)法
title	string	表格標(biāo)題
url	object	遠(yuǎn)程api接口配置
columns	array[object]	表格列屬性配置
actions	array[object]	表格右上角自定義按鈕
pageSize	number	每頁(yè)顯示數(shù)量	15
pageSizeOptions	array[string]	可選顯示數(shù)量	["10","15","20","30","50","100"]
sortField	string	初始排序字段	第一列
sortDirection	string	初始排序方式	desc

columns屬性詳細(xì)介紹：

關(guān)于如何在React中使用BodeGrid全自動(dòng)數(shù)據(jù)表格組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱(chēng)：如何在React中使用BodeGrid全自動(dòng)數(shù)據(jù)表格組件-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article14/eisde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、App開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)