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
• GridManager by React

示例

使用默认配置

<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
}

皮肤

以下皮肤为第三方提供，如果你也有过好的实现，请提交至 issues

• element-ui
• ant-design

贡献者

License

• License

浏览器兼容

• Firefox >= 53, Chrome >= 55，Edge, Safari
• 这里提一下为什么不支持IE: 使用表格插件的大都是管理平台或系统,通常都是会进行浏览器指定,所以设计之初就没有考虑这个方面.