原生表格组件--GridManager

GridManager.js

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

效果展示

原生表格组件--GridManager_第1张图片
灵活的原生态表格_r.jpg

实现功能

  • 宽度调整: 表格的列宽度可进行拖拽式调整

  • 位置更换: 表格的列位置进行拖拽式调整

  • 配置列: 可通过配置对列进行显示隐藏转换

  • 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部

  • 排序: 表格单项排序或组合排序

  • 分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

  • 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

  • 序号: 自动生成序号列

  • 全选: 自动生成全选列

  • 导出: 当前页数据下载,和仅针对已选中的表格下载

  • 右键菜单: 常用功能在菜单中可进行快捷操作

  • 过滤: 通过对列进行过滤达到快速搜索效果

安装

npm install gridmanager --save

引用

ES6+

import 'gridmanager/css/gm.css';
import GridManager from 'gridmanager';

ES5



API

  • [API](GridManager - API)

Demo

  • [简单的示例](GridManager - Demo)

  • [复杂的示例](GridManager demo)

相关链接

  • GridManager by Angular 1.x

  • GridManager by Vue

示例

使用默认配置

document.querySelector('table').GM({ gridManagerName: 'demo-baseCode', ajax_url: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList', ajax_type: 'POST', query: {pluginId: 1}, columnData: [ { key: 'name', text: '名称' },{ key: 'info', text: '使用说明' },{ key: 'url', text: 'url' } ] });

使用分页

document.querySelector('table').GM({ gridManagerName: 'demo-ajaxPageCode', ajax_url: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList', ajax_type: '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](GridManager - API)

数据格式

这是标准格式, 如果返回格式不同。可以通过参数或responseHandler进行修改。 具体请参考[API](GridManager - 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
}

你可能感兴趣的:(原生表格组件--GridManager)