62 Star 220 Fork 56

写个程序换个饼 / GridManager

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

GridManager.js

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

image Build Status npm version npm downloads coverage

优势

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

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

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

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

实现功能

功能 描述
宽度调整 表格的列宽度可进行拖拽式调整
位置更换 表格的列位置进行拖拽式调整
配置列 可通过配置对列进行显示隐藏转换
表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部
列固定 指定某列固定在左侧或右侧
排序 表格单项排序或组合排序
分页 表格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

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

贡献者

BoWang816
luchyrabbit
xtfan21
gaochaodd
silence717
heriky

License

浏览器兼容

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

微信讨论群

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

点评 ( 48 )

你可以在登录后,发表评论

简介

表格组件GridManager: 快速、灵活的对Table标签进行实例化,让Table标签充满活力。 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版

暂无发行版

GridManager

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/baukh/GridManager.git
git@gitee.com:baukh/GridManager.git
baukh
GridManager
GridManager
master

搜索帮助

105716 1d94204e 1850385 105716 2d26be5c 1850385