【bird-front】全自動數據表格組件bird-grid

bird-grid是bird-front前端框架中實現的全自動數據表格組件。組件內部處理數據加載、分頁、排序、查詢、新增、編輯等一系列操做。讓業務表格的開發從繁複的增刪查改中脫離出來，編碼簡潔卻又功能強大。

功能特性

• 豐富的列類型支持，包括文本、文本域、數字、bool、下拉選擇器、級聯選擇器、富文本、圖片、日期、時間等類型。
• 新增、編輯零代碼，支持自定義的編輯配置（提示、是否必填、正則驗證等）。
• 查詢、排序、分頁零代碼。每列都可查詢、排序。
• 自定義操做按鈕，默認提供新增、修改、刪除的操做按鈕。
• 組件內部支持按鈕級權限控制。

示例代碼

render() {
    let gridOption = {
      url: {
        read: "/sys/dic/getPaged",
        add: "/sys/dic/save",
        edit: "/sys/dic/save",
        delete: "/sys/dic/delete"
      },
      columns: [
        {title: "編號", data: "id", type: "number",},
        {title: "字典名稱", data: "name", type: "text", editor: {}, query: true},
        {title: "Key", data: "key", type: "text", editor: {}, query: true},
        {title: "默認業務碼", data: "defaultCode", type: "text", editor: {}, query: true},
        {title: "建立時間",data: "createTime",type: "datetime",query: true},
        {title: "操做選項", type: "command", actions: []}
      ]
    };
    return (<BirdGrid gridOption={gridOption}/>)
  }

 

效果圖

API

參數	說明	類型	默認值
url	表格相關服務api配置	object	{}
permission	權限相關配置	object/string	{}
checkable	是否添加Checkbox選擇框	bool	false
columns	表格列配置	array	[]
pageSize	每頁數據條數	number	15
pageSizeOptions	每頁數量選項數組	array	["10", "15", "20", "30", "50", "100"]
primaryKey	標識列	string	第一列的data參數
sortField	排序字段：'asc'、'desc'	string	'desc'
actions	右上角操做按鈕集合	array	[新增]
customRules	自定義篩選條件	array	[]

url相關API

參數	說明	類型	默認值
read	數據讀取服務端url	string	''
add	數據新增url	string	''
edit	數據更新url	string	''
delete	數據刪除url	string	''

注：全部接口均使用POST提交，read爲必填項，其餘配置均選填，不配置則不顯示相關的操做按鈕。

表格請求json格式：

{
    "filters": [
        {
            "field": "string",
            "operate": "string",
            "value": "string"
        }
    ],
    "pageIndex": 0,
    "pageSize": 0,
    "sortDirection": 0,
    "sortField": "string"
}

 

read接口返回json格式：

{
    "items": [],
    "totalCount": "10"
}

items中對象的字段對應表格中的列。

 

permission相關API

參數	說明	類型	默認值
add	新增權限名稱	string	''
edit	編輯權限名稱	string	''
delete	刪除權限名稱	string	''

add/edit/delete各自對應新增/編輯/刪除的權限名稱，不配置則表示不驗證對應的權限。
permission支持字符串格式，表格初始化時會自動爲其添加:add/:edit/:delete權限名。

 

columns相關API

參數	說明	類型	默認值
title	列名稱	string
data	對應數據的字段名	string
type	列類型。text、textarea、richtext、number、switch、dropdown、cascader、img、date、datetime、hide、command	string
query	列是否能夠查詢	bool	false
sortDisable	列是否禁止排序	bool	false
hide	列是否隱藏	bool	false
render	自定義列渲染方法	function(v,d)
source	當列類型爲dropdown（下拉選擇）或cascader（級聯選擇）時的數據源	object
actions	當列類型爲command時的操做按鈕數組	array	[編輯、刪除]
editor	列的編輯設置	object

說明：

• render(v,d){}方法第一個參數表示當前行當前列的數據，第二個參數表示整行的數據。
• scource:{data:[],url:'',key:''}。當類型爲`dropdown`時，其中data、url、key分別對應`bird-selector`中的data、url、dicKey。當類型爲`cascader`時，data、url分別對應`bird-cascader`中的data、url。

editor相關API

參數	說明	類型	默認值
ep	編輯模式。'default','hide','disabled'	string	'default'
ap	新增模式。'default','hide','disabled'	string	'default'
tips	提示信息	string	''
isRequired	是否必填	bool	false
validateRegular	驗證的正則表達式	object
step	number類型下的步長	number	1
precision	number類型的精度（小數的位數）	number	0

actions相關API

參數	說明	類型	默認值
name	按鈕名稱	string
onClick	點擊事件	function(data)	(data)=>{}
nameFormat	按鈕名稱渲染方法，根據行數據渲染不一樣的按鈕名	function(data)
hideFunc	根據行數據判斷按鈕是否顯示方法	function(data)
permissionName	所需權限名	string

說明：

• 本表格全部方法接收的data爲行數據（右上角按鈕的onClick事件除外）；
• nameFormat，只對行內action有效，優先級高於name；
• hideFunc，只對行內action有效，存在且hideFunc(data)爲true時，該按鈕隱藏；
• permissionName實現按鈕級權限控制；
• onClick。右上角按鈕：data表示表格選中的值；行內按鈕：data表示行數據；

 

customRules相關API

參數	說明	類型	默認值
field	列字段名稱	string
value	值	string

說明：
customRules是在表格初始化以前爲表格添加自定義查詢條件，可用於url上不一樣參數對於表格數據的控制。

 

項目地址

組件源碼在bird-front項目中有完整實現，項目地址：https://github.com/liuxx001/bird-front