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

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

新增和編輯

想想我們最開始寫新增編輯頁面是怎么做的，是不是一個頁面一個頁面的寫，然后要么表單提交要么Ajax提交。后臺有無數個新增和編輯的視圖頁，現在想想真是恐怖啊，看著都累。后面接觸到kendoui的grid組件，看到只需要配置列的屬性以及保存的地址就能自動完成新增和編輯功能，著實讓我興奮了一把。然而不幸的是我幾乎找遍了react所有的組件庫，都沒找到一個類似的組件，無奈只有自己動手了。設計思路：

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

2、為不同類型提供不同的操作組件，比如文本的input組件，圖片的file組件。這樣在新增和編輯的時候會根據列以及其類型生成對應的表單。

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

查詢、排序、分頁

查詢、排序和分頁幾乎是每個表格頁面必須的功能，實現方式也多種多樣，這里介紹表格萬能查詢和排序的設計思路：

1、每一列是否可以查詢應該是可以配置的。

2、針對不同的數據類型查詢條件應該有所區別，比如文本有“包含”條件，數字有“大于”條件等。

3、后端的處理應該統一，為每一個查詢條件編寫查詢邏輯是很費力不討好的工作。

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

最后表格的請求體設計如下：

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

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

不過使用起來還是很簡單的，如下所示：

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:"是否靜態角色",data:"isStatic",type:"switch",editor:{},query:true},   {title:"是否默認角色",data:"isDefault",type:"switch",editor:{},query:true},   {title:"操作選項",type:"command",actions:[{name:"設置權限",onClick:showPermissionModel}]}  ] }; return {  gridOptions: gridOptions };}

很少的代碼就能完全實現表格的展示、新增、編輯、排序、查詢、分頁等功能，顯示效果：

BodeGrid表格api：

columns屬性詳細介紹：

總結

以上所述是小編給大家介紹的React 全自動數據表格組件――BodeGrid的實現思路 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！