gridmanager v3.2.1

GridManager 一套代码多框架运行

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

优势

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

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

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

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

实现功能

安装

npm install gridmanager --save

安装文件目录及说明

• index.css 样式文件，原生及框架使用同一份样式文件
• index.js 原生使用的js文件
• vue2 vue2框架使用的js文件
• react react框架使用的js文件
• angular-1.x.js angular1.x使用的js文件

引用

ES6+

import 'gridmanager/index.css'; // 各框架通过样式文件
import GridManager from 'gridmanager'; // 原生js引用方式
import GridManager from 'gridmanager/vue2'; // vu2引用方式
import GridManager from 'gridmanager/react'; // react引用方式
import GridManager from 'gridmanager/angular-1.x'; // angular-1.x引用方式

ES5

<link rel="stylesheet" href="gridmanager/index.css">
<script src="gridmanager/index.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
• skin tool

贡献者

License

• License

浏览器兼容

• Firefox >= 59, Chrome >= 56，Edge >= 16, Safari >= 13

微信讨论群

使用问题可扫码加群讨论，BUG类问题请通过issues提交。