原生表格組件--GridManager

GridManager.js

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

實現功能

• 寬度調整: 表格的列寬度可進行拖拽式調整
• 位置更換: 表格的列位置進行拖拽式調整
• 配置列: 可經過配置對列進行顯示隱藏轉換
• 表頭吸頂: 在表存在可視區域的狀況下,表頭將一直存在於頂部
• 排序: 表格單項排序或組合排序
• 分頁: 表格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

• API

Demo

• 簡單的示例
• 複雜的示例

相關連接

• GridManager by Angular 1.x
• GridManager by Vue

示例

使用默認配置

<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
}
複製代碼