README.md · Darren18028809971/GridManager

# GridManager [一套代码多框架运行]
> 快速、灵活的对Table标签进行实例化，让Table标签充满活力。

![image](https://s2.ax1x.com/2019/04/16/AxA4xK.png)
[![Build Status](https://travis-ci.org/baukh789/GridManager.svg?branch=master&style=flat-square)](https://travis-ci.org/baukh789/GridManager)
[![npm version](https://img.shields.io/npm/v/gridmanager.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager)
[![npm downloads](https://img.shields.io/npm/dt/gridmanager.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager)
[![coverage](https://img.shields.io/codecov/c/github/baukh789/GridManager.svg?style=flat-square)](https://codecov.io/gh/baukh789/GridManager)

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

内置基础类库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](https://gridmanager.lovejavascript.com/api/index.html)

## Demo
- [简单的示例](https://gridmanager.lovejavascript.com/demo/index.html)
- [复杂的示例](http://develop.lovejavascript.com/)

## 框架版本介绍
- [GridManager by Angular 1.x](https://github.com/baukh789/GridManager/tree/master/src/framework/angular-1.x/README.md)
- [GridManager by Vue](https://github.com/baukh789/GridManager/tree/master/src/framework/vue/README.md)
- [GridManager by React](https://github.com/baukh789/GridManager/tree/master/src/framework/react/README.md)

## 示例
### 使用默认配置
```html
<table></table>
```
```javascript
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'
        }
    ]
});
```

### 使用分页
```html
<table></table>
```
```javascript
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'
        }
    ]
});
```

### 调用公开方法
```javascript
// 刷新
GM.refreshGrid('demo-ajaxPageCode');

// 更新查询条件
GM.setQuery('demo-ajaxPageCode', {name: 'baukh'});
```

其它更多请直接访问[API](https://gridmanager.lovejavascript.com/api/index.html)

## 数据格式
> 这是标准格式, 如果返回格式不同。可以通过参数或responseHandler进行修改。 具体请参考[API](https://gridmanager.lovejavascript.com/api/index.html#responseHandler)

```
{
    "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](https://github.com/baukh789/GridManager/issues)

- [element-ui](https://github.com/xtfan21/GridManager-element-skin)
- [ant-design](https://github.com/BoWang816/GridManager-antDesign-skin)

## 贡献者
<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&amp;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](/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">

Darren18028809971/GridManager

简介

发行版

贡献者

近期动态

Darren18028809971/GridManager .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Darren18028809971/GridManager