GridManager.js

快速、靈活的對(duì)Table標(biāo)簽進(jìn)行實(shí)例化继阻，讓Table標(biāo)簽充滿活力。

效果展示

靈活的原生態(tài)表格_r.jpg

實(shí)現(xiàn)功能

• 寬度調(diào)整: 表格的列寬度可進(jìn)行拖拽式調(diào)整

• 位置更換: 表格的列位置進(jìn)行拖拽式調(diào)整

• 配置列: 可通過配置對(duì)列進(jìn)行顯示隱藏轉(zhuǎn)換

• 表頭吸頂: 在表存在可視區(qū)域的情況下,表頭將一直存在于頂部

• 排序: 表格單項(xiàng)排序或組合排序

• 分頁: 表格ajax分頁,包含選擇每頁顯示總條數(shù)和跳轉(zhuǎn)至指定頁功能

• 用戶偏好記憶: 記住用戶行為,含用戶調(diào)整的列寬、列順序仿粹、列可視狀態(tài)及每頁顯示條數(shù)

• 序號(hào): 自動(dòng)生成序號(hào)列

• 全選: 自動(dòng)生成全選列

• 導(dǎo)出: 當(dāng)前頁數(shù)據(jù)下載,和僅針對(duì)已選中的表格下載

• 右鍵菜單: 常用功能在菜單中可進(jìn)行快捷操作

• 過濾: 通過對(duì)列進(jìn)行過濾達(dá)到快速搜索效果

安裝

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](GridManager - API)

Demo

• [簡單的示例](GridManager - Demo)

• [復(fù)雜的示例](GridManager demo)

相關(guān)鏈接

• GridManager by Angular 1.x

• GridManager by Vue

示例

使用默認(rèn)配置

<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'
        }
    ]
});

調(diào)用公開方法

// 刷新
GM.refreshGrid('demo-ajaxPageCode');

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

其它更多請(qǐng)直接訪問[API](GridManager - API)

數(shù)據(jù)格式

這是標(biāo)準(zhǔn)格式, 如果返回格式不同≡可以通過參數(shù)或responseHandler進(jìn)行修改吭历。 具體請(qǐng)參考[API](GridManager - 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
}