快捷導(dǎo)航

React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid的實(shí)現(xiàn)思路

更新時(shí)間：2019年06月12日 11:11:02 作者：_liuxx

表格是在后臺(tái)管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁(yè)、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下

表格是在后臺(tái)管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁(yè)、自定義顯示以及一些操作按鈕。我們逐一深入進(jìn)行探討以及介紹我的設(shè)計(jì)思路：

新增和編輯

想想我們最開始寫新增編輯頁(yè)面是怎么做的，是不是一個(gè)頁(yè)面一個(gè)頁(yè)面的寫，然后要么表單提交要么Ajax提交。后臺(tái)有無數(shù)個(gè)新增和編輯的視圖頁(yè)，現(xiàn)在想想真是恐怖啊，看著都累。后面接觸到kendoui的grid組件，看到只需要配置列的屬性以及保存的地址就能自動(dòng)完成新增和編輯功能，著實(shí)讓我興奮了一把。然而不幸的是我?guī)缀跽冶榱藃eact所有的組件庫(kù)，都沒找到一個(gè)類似的組件，無奈只有自己動(dòng)手了。設(shè)計(jì)思路：

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

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

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

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

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

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

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

3、后端的處理應(yīng)該統(tǒng)一，為每一個(gè)查詢條件編寫查詢邏輯是很費(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

不過使用起來還是很簡(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ù)	類型	說明	默認(rèn)值
ref	object	ref指向本身，用于行內(nèi)按鈕綁定數(shù)據(jù)	ref:this,固定寫法
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ì)介紹：

總結(jié)

以上所述是小編給大家介紹的React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid的實(shí)現(xiàn)思路 ,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: