?? React 洞辣？Vue? Table漏设？ ===> GridManager

image.png

?????GridManager 是一套可快速陨囊、靈活的對table標簽進行實例化的表格組件弦疮。使用簡單快捷, 功能強大，基于原生js實現(xiàn), 不依賴任何框架蜘醋，目前支持react胁塞、vue、angularjs三大框架压语。今天就來說一說啸罢，gridmanager在react中的使用。

引入

????????基于目前前端項目多數(shù)使用webpack或其他工具進行打包部署胎食，所以可以直接通過package.json中安裝gridmanager-react包扰才，在項目中使用import進行引入，同時也需要引入所需的css文件厕怜。

import ReactGridManager from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';

當然也支持直接通過script標簽方式引入

<link rel="stylesheet" href="../node_modules/gridmanager-react/css/gm-react.css">
<script src="../node_modules/gridmanager-react/js/gm-react.js"></script>

使用

基礎(chǔ)配置

在使用gridManager時衩匣，有幾個必須配置的屬性，分別是：

gridManagerName 表格唯一名稱
columnData 表格列配置
ajaxData 表格獲取數(shù)據(jù)

當未設(shè)置gridManagerName時粥航，控制臺會給出友好提示：

image.png

可以直接在組件中設(shè)置各種屬性琅捏，如：

image.png

也可以統(tǒng)一使用option屬性進行管理：

image.png

通過設(shè)置這三個必須的參數(shù)后，就可以展示一個靈活的表格了：

image.png

更多屬性配置

gridManager具有十分豐富递雀、靈活的屬性配置柄延，如序號支持、排序缀程、多選搜吧、單選挥下、列寬度調(diào)整殊橙、用戶習慣記憶印衔、右鍵菜單语盈、行或列拖拽移動、復雜表頭吱殉、表頭嵌套递礼、底部翻頁自定義岖圈、樹型列鹦牛、通欄、導出excel等等功能勇吊。這里我們只展示平常用的最多曼追、且功能強大的幾個屬性，更多的設(shè)置可通過官方API文檔查看汉规。

基礎(chǔ)列配置：

在columnData中礼殊，配置相關(guān)的列驹吮，具有不同的配置項：

{
    key: 'name',
    width: '110px',
    text: '信息',
    template: name => <span>{name}</span>
}

key: 列的唯一索引。字符串類型晶伦，必設(shè)項碟狞；

text: 列顯示文本；

isShow: 是否顯示該列婚陪；

disableCustomize: 是否禁用該列自定義個性配置族沃；

disableMoveRow: 是否禁用該列移動；

disableRowCheck: 是否禁用該列觸發(fā)行選中事件泌参；

merge: 是否將相同數(shù)據(jù)列合并脆淹，在配置template的情況下會以執(zhí)行結(jié)果
進行比對，兩種值: 'text'指定比對td.innerText, 'html'指定比對td.innerHTML沽一；

width: 列寬度盖溺；

align: 列對齊方式，三種值: 'left', 'center', 'right'铣缠；

fixed: 固定該列烘嘱，默認undefined，兩種值: 'left', 'right'蝗蛙；

sorting: 列排序蝇庭，'DESC': 該列支持排序，'ASC': 該列支持排序歼郭，空則不顯示排序遗契；

remind: 列表頭提醒，對象類型病曾；

filter: 列表頭篩選條件配置牍蜂；

template: 自定義列模版；

children：子項配置, 通過該項可以實現(xiàn)嵌套表頭泰涂；

通欄設(shè)置：fullColumn

使用：支持頂部與底部通欄鲫竞，以及是否使用折疊，行間距等屬性逼蒙；

image.png
展示效果：

image.png

數(shù)據(jù)返回設(shè)置：ajaxData

使用：ajaxData支持多種類型从绘，包括：url string、response data是牢、function僵井，其中function的返回支持三種類型：promise、url string驳棱、response data批什；
使用場景：
1. 當想使用靜態(tài)數(shù)據(jù)時，可以通過使用response data社搅，在項目中將返回數(shù)據(jù)寫成常量驻债，方便測試乳规；
2. 當使用axios等工具時，如果直接返回的是promise合呐，則無需再通過then進行返回數(shù)據(jù)獲取暮的，組件會進行promise結(jié)果的相關(guān)處理；
3. 當返回數(shù)據(jù)與要展示的數(shù)據(jù)存在差異需要進行相關(guān)數(shù)據(jù)處理時淌实，使用function類型在函數(shù)中執(zhí)行相關(guān)的處理邏輯冻辩，最后將處理后的數(shù)據(jù)return即可。

carbon.png

請求類型：ajaxType

默認值: 'GET'
使用：ajaxType請求類型翩伪，分為'GET' 和 'POST'兩種類型微猖，配置項ajaxData的值(或函數(shù)的返回值)為string url時， ajaxType才會生效缘屹。如后端如果使用GraphQL凛剥，多數(shù)使用的是Post方法，則獲取表格數(shù)據(jù)的接口對應(yīng)的就可以通過該參數(shù)設(shè)置為Post轻姿；

指定返回數(shù)據(jù)列表的key鍵值: dataKey

默認值：'data'
使用：當后端接口中返回的key值不為'data'時犁珠，可通過該屬性進行配置，如我這里接口返回的列對應(yīng)的key值時'test'互亮，則需要配置dataKey屬性為'test'犁享，即可。通常情況下豹休，企業(yè)的項目返回的字段名稱多數(shù)會保持一致炊昆，但難免會出現(xiàn)需要適配不同人開發(fā)出來不同接口的且字段不同的情況，該屬性就可以完美解決威根。

image.png

復選框配置：checkboxConfig

使用：通過使用checkboxConfig可以在使用復選時進行相關(guān)的配置凤巨，如是否通過點擊行進行選中，是否設(shè)置最多選中數(shù)量洛搀，使用單選還是多選敢茁。在使用該屬性時，必須將supportCheckbox屬性設(shè)置為true留美。

image.png
效果：在這里我設(shè)置了最多可選擇1條彰檬，且支持行點擊選中，當選擇1條后谎砾，其余的復選框則會置灰不可選逢倍。

image.png

底部分頁模版：ajaxPageTemplate

使用：該屬性可用于自定義底部分頁區(qū)域，要設(shè)置該屬性景图，必須將supportAjaxPage屬性設(shè)置為true较雕，在該模版中通過拿到相應(yīng)的數(shù)據(jù)，可以自由的寫css控制樣式症歇，默認模版
默認效果：

image.png
自定義后的效果：我設(shè)置的模版基于ant-design的模版

image.png

當然郎笆，你也可以像我一樣自己寫一套皮膚，用在自己的項目中忘晤。

翻頁相關(guān)配置:

useNoTotalsMode：默認為false宛蚓，是否使用無總頁模式，因為當后端數(shù)據(jù)量過大设塔，可能要獲取總條數(shù)來計算總頁數(shù)的時間會很長凄吏，該屬性則是不再展示總條數(shù)與總頁數(shù)，只顯示翻頁闰蛔。

image.png
sizeDataArray：默認[10,20,30,50,100]痕钢，配置每頁顯示條數(shù)的下拉項，數(shù)組元素僅允許為正整數(shù)序六。
pageSize：默認20任连，配置初次進入時每頁的顯示條數(shù)，需要與sizeData中的值匹配例诀。
asyncTotals：默認undefined随抠，配置異步分頁模式, 通過該配置可以提升當前頁的加載性能.當useNoTotalsMode:true 時，該配置失效繁涂。當ajaxData返回數(shù)據(jù)小于當前頁顯示條數(shù)時拱她，handler中的函數(shù)不再執(zhí)行。
totalsKey ：默認‘totals’扔罪，指定返回數(shù)據(jù)總條數(shù)的key鍵值秉沼。在接口返回數(shù)據(jù)格式不匹配時，可以通過該配置項進行修改矿酵。
currentPageKey：默認‘cPage’唬复，請求參數(shù)中當前頁key鍵值。
pageSizeKey：默認‘pSize’坏瘩，請求參數(shù)中每頁顯示條數(shù)key健值盅抚。

其他常用配置:

skinClassName：默認‘’，開發(fā)獨立皮膚時可通過該屬性定位css倔矾，方便修改覆蓋妄均。
disableLine：默認false，配置是否禁用單元格分割線哪自。
disableBorder：默認false丰包，配置是否禁用邊框線。
loadingTemplate：數(shù)據(jù)加載中模板壤巷，該配置可以自定義數(shù)據(jù)加載時使用的loading樣式邑彪，與ajaxTeemplate使用方式類似。
supportConfig：默認false胧华，配置是否支持列表配置功能寄症，可手動顯示/隱藏列宙彪。
supportMenu：默認true，配置是否支持右鍵菜單功能有巧，禁用后右鍵功能將失效释漆。
supportAdjust：默認true，用于配置是否支持寬度調(diào)整功能篮迎。
supportDrag：默認true男图，用于配置是否支持列的拖拽功能。
supportTreeData：默認false甜橱，用于配置是否支持樹型表格逊笆，配置樹型數(shù)據(jù)后行移動功能將無效。

......

總結(jié)

????以上內(nèi)容僅僅是gridManager中一小部分的功能岂傲，想要知道更多的功能可以通過官網(wǎng)地址查看难裆；

????總的來說，gridManager真的是功能強大譬胎，靈活配置差牛，并且占用包體積小，且能夠在框架間無縫切換堰乔，即便你之前只寫過Vue偏化，現(xiàn)在要通過React重構(gòu)，使用它也只是需要更改一下columnData中的template屬性即可镐侯，其他的配置項基本可以直接復制粘貼侦讨，我從angularjs切換到react時，項目中用到了大概10多個表格苟翻，只用了一上午時間無腦復制粘貼就可以完成韵卤，鐵子們快來試試吧！３缑ā沈条！