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

注：所有介面均使用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/edit/delete各自對應新增/編輯/刪除的許可權名稱，不配置則表示不驗證對應的許可權。
permission支援字串格式，表格初始化時會自動為其新增:add/:edit/:delete許可權名。

columns相關API

說明：

• 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

actions相關API

說明：

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

customRules相關API

說明：
customRules是在表格初始化之前為表格新增自定義查詢條件，可用於url上不同引數對於表格資料的控制。

專案地址