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

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
}

皮肤

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

贡献者

<table> <tr> <td> <a href="https://github.com/BoWang816"> <img alt="" width="100" height="100" class="avatar width-full rounded-2" src="https://avatars2.githubusercontent.com/u/26587649?s=460&v=4"> <div style="text-align:center">BoWang816</div> </a> </td> <td> <a href="https://github.com/luchyrabbit"> <img alt="" width="100" height="100" class="avatar width-full rounded-2" src="https://avatars0.githubusercontent.com/u/21122430?s=460&v=4"> <div style="text-align:center">luchyrabbit</div> </a> </td> <td> <a href="https://github.com/xtfan21"> <img alt="" width="100" height="100" class="avatar width-full rounded-2" src="https://avatars2.githubusercontent.com/u/23092282?s=460&v=4"> <div style="text-align:center">xtfan21</div> </a> </td> <td> <a href="https://github.com/gaochaodd"> <img alt="" width="100" height="100" class="avatar width-full rounded-2" src="https://avatars3.githubusercontent.com/u/19342927?s=460&v=4"> <div style="text-align:center">gaochaodd</div> </a> </td> <td> <a href="https://github.com/silence717"> <img alt="" width="100" height="100" class="avatar width-full rounded-2" src="https://avatars2.githubusercontent.com/u/8267830?s=460&v=4"> <div style="text-align:center">silence717</div> </a> </td> <td> <a href="https://github.com/heriky"> <img alt="" width="100" height="100" class="avatar width-full rounded-2" src="https://avatars1.githubusercontent.com/u/12195736?s=460&v=4"> <div style="text-align:center">heriky</div> </a> </td> </tr> </table>

License

License

浏览器兼容

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

微信讨论群

使用问题可扫码加群讨论，BUG类问题请通过issues提交。
<img alt="" width="200" height="200" class="avatar width-full rounded-2" src="https://gridmanager.lovejavascript.com/wx-code.jpg">

GridManager

Install / Use

README