README

GridManager.js

快速、灵活的对Table标签进行实例化，让Table标签充满活力。

优势

在支持常见功能的前提下，提供了如: 导出、打印、列配置、右键菜单、行列移动、用户偏好记忆等提升用户体验的功能。

内置基础类库jTool, 对原生DOM提供了缓存机制。

支持在原生JS、jQuery、Angular 1.x、Vue、React环境下使用，一套代码多框架运行。

在框架满天飞的时代，助力前端开发人员用更少的API做更多的事情。

实现功能

安装

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
}