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

Demo

示例

使用默认配置

<table></table>

document.querySelector('table').GM({
	gridManagerName: 'demo-baseCode',
    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajaxType: 'POST',
    query: {pluginId: 1},
    columnData: [
        {
            key: 'name',
            text: '名称'
        },{
            key: 'info',
            text: '使用说明'
        },{
            key: 'url',
            text: 'url'
        }
    ]
});

使用分页

<table></table>

document.querySelector('table').GM({
	gridManagerName: 'demo-ajaxPageCode',
    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajaxType: '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
}