原生表格元件--GridManager

baukh789發表於2019-04-04
元件

GridManager.js

快速、靈活的對Table標籤進行例項化，讓Table標籤充滿活力。

image

實現功能

  • 寬度調整: 表格的列寬度可進行拖拽式調整
  • 位置更換: 表格的列位置進行拖拽式調整
  • 配置列: 可通過配置對列進行顯示隱藏轉換
  • 表頭吸頂: 在表存在可視區域的情況下,表頭將一直存在於頂部
  • 排序: 表格單項排序或組合排序
  • 分頁: 表格ajax分頁,包含選擇每頁顯示總條數和跳轉至指定頁功能
  • 使用者偏好記憶: 記住使用者行為,含使用者調整的列寬、列順序、列可視狀態及每頁顯示條數
  • 序號: 自動生成序號列
  • 全選: 自動生成全選列
  • 匯出: 當前頁資料下載,和僅針對已選中的表格下載
  • 右鍵選單: 常用功能在選單中可進行快捷操作
  • 過濾: 通過對列進行過濾達到快速搜尋效果

安裝

npm install gridmanager --save
複製程式碼

引用

ES6+

import 'gridmanager/css/gm.css';
import GridManager from 'gridmanager';
複製程式碼

ES5

<link rel="stylesheet" href="/node_modules/gridmanager/css/gm.css">
<script src="/node_modules/gridmanager/js/gm.js"></script>
複製程式碼

API

Demo

相關連結

示例

使用預設配置

<table></table>
複製程式碼
document.querySelector('table').GM({
	gridManagerName: 'demo-baseCode',
    ajax_url: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajax_type: 'POST',
    query: {pluginId: 1},
    columnData: [
        {
            key: 'name',
            text: '名稱'
        },{
            key: 'info',
            text: '使用說明'
        },{
            key: 'url',
            text: 'url'
        }
    ]
});
複製程式碼

使用分頁

<table></table>
複製程式碼
document.querySelector('table').GM({
	gridManagerName: 'demo-ajaxPageCode',
    ajax_url: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajax_type: 'POST'
    query: {pluginId: 1},
    supportAjaxPage: true,
    columnData: [
        {
            key: 'name',
            text: 'name'
        },{
            key: 'info',
            text: 'info'
        },{
            key: 'url',
            text: 'url'
        }
    ]
});
複製程式碼

呼叫公開方法

// 重新整理
GM.refreshGrid('demo-ajaxPageCode');

// 更新查詢條件
GM.setQuery('demo-ajaxPageCode', {name: 'baukh'});
複製程式碼

其它更多請直接訪問API

資料格式

這是標準格式, 如果返回格式不同。可以通過引數或responseHandler進行修改。 具體請參考API

{
    "data":[{
        "name": "baukh",
        "age": "28",
        "createDate": "2015-03-12",
        "info": "野生前端程式",
        "operation": "修改"
    },
    {
        "name": "baukh",
        "age": "28",
        "createDate": "2015-03-12",
        "info": "野生前端程式",
        "operation": "修改"
    },
    {
        "name": "baukh",
        "age": "28",
        "createDate": "2015-03-12",
        "info": "野生前端程式",
        "operation": "修改"
    }],
    "totals": 1682
}
複製程式碼

相關文章